fixed camera screen layout

lib/res/dimens.dart

@@ -21,6 +21,10 @@ class Dimens {
   static const Duration durationML = Duration(milliseconds: 250);
   static const Duration durationL = Duration(milliseconds: 300);
 
+  // TopBar
+  /// Probably this is a bad practice, but with text size locked, the height is always 212
+  static const double readingContainerHeight = 212;
+
   // `CenteredSlider`
   static const double cameraSliderTrackHeight = grid4;
   static const double cameraSliderTrackRadius = cameraSliderTrackHeight / 2;

lib/screens/metering/components/camera_container/widget_container_camera.dart

@@ -38,6 +38,9 @@ class CameraContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final topBarOverflow = Dimens.readingContainerHeight -
+        ((MediaQuery.of(context).size.width - Dimens.grid8 - 2 * Dimens.paddingM) / 2) /
+            PlatformConfig.cameraPreviewAspectRatio;
     return Column(
       children: [
         MeteringTopBar(
@@ -49,11 +52,17 @@ class CameraContainer extends StatelessWidget {
             onIsoChanged: onIsoChanged,
             onNdChanged: onNdChanged,
           ),
+          appendixHeight: topBarOverflow,
+          preview: const _CameraViewBuilder(),
         ),
         Expanded(
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingM),
-            child: ExposurePairsList(exposurePairs),
+            child: _MiddleContentWrapper(
+              topBarOverflow: topBarOverflow,
+              leftContent: ExposurePairsList(exposurePairs),
+              rightContent: const _CameraControlsBuilder(),
+            ),
           ),
         ),
       ],
@@ -85,23 +94,66 @@ class _CameraControlsBuilder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<CameraContainerBloc, CameraContainerState>(
+    return Padding(
-      builder: (context, state) => AnimatedSwitcher(
+      padding: const EdgeInsets.symmetric(vertical: Dimens.paddingM),
-        duration: Dimens.durationS,
+      child: BlocBuilder<CameraContainerBloc, CameraContainerState>(
-        child: state is CameraActiveState
+        builder: (context, state) => AnimatedSwitcher(
-            ? CameraControls(
+          duration: Dimens.durationS,
-                exposureOffsetRange: state.exposureOffsetRange,
+          child: state is CameraActiveState
-                exposureOffsetValue: state.currentExposureOffset,
+              ? CameraControls(
-                onExposureOffsetChanged: (value) {
+                  exposureOffsetRange: state.exposureOffsetRange,
-                  context.read<CameraContainerBloc>().add(ExposureOffsetChangedEvent(value));
+                  exposureOffsetValue: state.currentExposureOffset,
-                },
+                  onExposureOffsetChanged: (value) {
-                zoomRange: state.zoomRange,
+                    context.read<CameraContainerBloc>().add(ExposureOffsetChangedEvent(value));
-                zoomValue: state.currentZoom,
+                  },
-                onZoomChanged: (value) {
+                  zoomRange: state.zoomRange,
-                  context.read<CameraContainerBloc>().add(ZoomChangedEvent(value));
+                  zoomValue: state.currentZoom,
-                },
+                  onZoomChanged: (value) {
-              )
+                    context.read<CameraContainerBloc>().add(ZoomChangedEvent(value));
-            : const SizedBox.shrink(),
+                  },
+                )
+              : const SizedBox.shrink(),
+        ),
+      ),
+    );
+  }
+}
+
+class _MiddleContentWrapper extends StatelessWidget {
+  final double topBarOverflow;
+  final Widget leftContent;
+  final Widget rightContent;
+
+  const _MiddleContentWrapper({
+    required this.topBarOverflow,
+    required this.leftContent,
+    required this.rightContent,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) => OverflowBox(
+        alignment: Alignment.bottomCenter,
+        maxHeight: constraints.maxHeight + topBarOverflow.abs(),
+        maxWidth: constraints.maxWidth,
+        child: Row(
+          children: [
+            Expanded(
+              child: Padding(
+                padding: EdgeInsets.only(top: topBarOverflow >= 0 ? topBarOverflow : 0),
+                child: leftContent,
+              ),
+            ),
+            const SizedBox(width: Dimens.grid8),
+            Expanded(
+              child: Padding(
+                padding: EdgeInsets.only(top: topBarOverflow <= 0 ? -topBarOverflow : 0),
+                child: rightContent,
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

lib/screens/metering/components/shared/readings_container/components/reading_value_container/widget_container_reading_value.dart

@@ -68,11 +68,17 @@ class _ReadingValueBuilder extends StatelessWidget {
         Text(
           reading.label,
           style: textTheme.labelMedium?.copyWith(color: textColor),
+          maxLines: 1,
+          overflow: TextOverflow.visible,
+          softWrap: false,
         ),
         const SizedBox(height: Dimens.grid4),
         Text(
           reading.value,
           style: textTheme.titleMedium?.copyWith(color: textColor),
+          maxLines: 1,
+          overflow: TextOverflow.visible,
+          softWrap: false,
         ),
       ],
     );