viewer: bottom overlay layout

lib/widgets/viewer/overlay/bottom/common.dart

@@ -74,33 +74,16 @@ class _ViewerBottomOverlayState extends State<ViewerBottomOverlay> {
 
   @override
   Widget build(BuildContext context) {
-    final showOverlayInfo = settings.showOverlayInfo;
+    final hasEdgeContent = settings.showOverlayThumbnailPreview || settings.showOverlayInfo || multiPageController != null;
-    final hasEdgeContent = showOverlayInfo || multiPageController != null;
     final blurred = settings.enableOverlayBlurEffect;
     return BlurredRect(
       enabled: hasEdgeContent && blurred,
-      child: Selector<MediaQueryData, Tuple3<double, EdgeInsets, EdgeInsets>>(
+      child: Selector<MediaQueryData, double>(
-        selector: (context, mq) => Tuple3(mq.size.width, mq.viewInsets, mq.viewPadding),
+        selector: (context, mq) => max(mq.effectiveBottomPadding, mq.systemGestureInsets.bottom),
-        builder: (context, mq, child) {
-          final mqWidth = mq.item1;
-          final mqViewInsets = mq.item2;
-          final mqViewPadding = mq.item3;
-
-          final viewInsets = widget.viewInsets ?? mqViewInsets;
-          final viewPadding = widget.viewPadding ?? mqViewPadding;
-          final availableWidth = mqWidth - viewPadding.horizontal;
-
-          return Selector<MediaQueryData, double>(
-            selector: (context, mq) => max(mq.effectiveBottomPadding, showOverlayInfo ? 0 : mq.systemGestureInsets.bottom),
         builder: (context, mqPaddingBottom, child) {
           return Container(
             color: hasEdgeContent ? overlayBackgroundColor(blurred: blurred) : Colors.transparent,
-                padding: EdgeInsets.only(
+            padding: EdgeInsets.only(bottom: mqPaddingBottom),
-                  left: max(viewInsets.left, viewPadding.left),
-                  top: 0,
-                  right: max(viewInsets.right, viewPadding.right),
-                  bottom: mqPaddingBottom,
-                ),
             child: child,
           );
         },
@@ -121,7 +104,6 @@ class _ViewerBottomOverlayState extends State<ViewerBottomOverlay> {
                   pageEntry: pageEntry ?? mainEntry,
                   details: _lastDetails,
                   showPosition: widget.showPosition,
-                      safeWidth: availableWidth,
                   multiPageController: multiPageController,
                 );
 
@@ -133,8 +115,6 @@ class _ViewerBottomOverlayState extends State<ViewerBottomOverlay> {
                 : _buildContent();
           },
         ),
-          );
-        },
       ),
     );
   }
@@ -146,7 +126,6 @@ class _BottomOverlayContent extends AnimatedWidget {
   final AvesEntry mainEntry, pageEntry;
   final OverlayMetadata? details;
   final bool showPosition;
-  final double safeWidth;
   final MultiPageController? multiPageController;
 
   _BottomOverlayContent({
@@ -157,7 +136,6 @@ class _BottomOverlayContent extends AnimatedWidget {
     required this.pageEntry,
     required this.details,
     required this.showPosition,
-    required this.safeWidth,
     required this.multiPageController,
   }) : super(
           key: key,
@@ -176,8 +154,11 @@ class _BottomOverlayContent extends AnimatedWidget {
       softWrap: false,
       overflow: TextOverflow.fade,
       maxLines: 1,
-      child: SizedBox(
+      child: Selector<MediaQueryData, double>(
-        width: safeWidth,
+        selector: (context, mq) => mq.size.width,
+        builder: (context, mqWidth, child) {
+          return SizedBox(
+            width: mqWidth,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -185,24 +166,34 @@ class _BottomOverlayContent extends AnimatedWidget {
                 if (mainEntry.isMultiPage && multiPageController != null)
                   MultiPageOverlay(
                     controller: multiPageController!,
-                availableWidth: safeWidth,
+                    availableWidth: mqWidth,
                   ),
                 if (settings.showOverlayInfo)
-              ViewerDetailOverlay(
+                  SafeArea(
+                    top: false,
+                    bottom: false,
+                    child: LayoutBuilder(
+                      builder: (context, constraints) {
+                        return ViewerDetailOverlay(
                           pageEntry: pageEntry,
                           details: details,
                           position: showPosition ? '${index + 1}/${entries.length}' : null,
-                availableWidth: safeWidth,
+                          availableWidth: constraints.maxWidth,
                           multiPageController: multiPageController,
+                        );
+                      },
+                    ),
                   ),
                 if (settings.showOverlayThumbnailPreview)
                   ViewerThumbnailPreview(
-                availableWidth: safeWidth,
+                    availableWidth: mqWidth,
                     displayedIndex: index,
                     entries: entries,
                   ),
               ],
             ),
+          );
+        },
       ),
     );
   }

untranslated.json

@@ -1,31 +1,31 @@
 {
   "de": [
     "entryActionConvert",
-    "settingsViewerShowOverlayThumbnailPreview"
+    "settingsViewerShowOverlayThumbnails"
   ],
 
   "es": [
-    "settingsViewerShowOverlayThumbnailPreview"
+    "settingsViewerShowOverlayThumbnails"
   ],
 
   "fr": [
-    "settingsViewerShowOverlayThumbnailPreview"
+    "settingsViewerShowOverlayThumbnails"
   ],
 
   "id": [
-    "settingsViewerShowOverlayThumbnailPreview"
+    "settingsViewerShowOverlayThumbnails"
   ],
 
   "ko": [
-    "settingsViewerShowOverlayThumbnailPreview"
+    "settingsViewerShowOverlayThumbnails"
   ],
 
   "pt": [
-    "settingsViewerShowOverlayThumbnailPreview"
+    "settingsViewerShowOverlayThumbnails"
   ],
 
   "ru": [
     "entryActionConvert",
-    "settingsViewerShowOverlayThumbnailPreview"
+    "settingsViewerShowOverlayThumbnails"
   ]
 }