Fix landscape reader layout and wrap long settings labels (#640)

* fix: handle mobile landscape safe area #604

* fix: adjust reader toolbars safe area

* fix: adjust multi-image reader layout after orientation change

* fix: item titles not fully displayed

lib/components/navigation_bar.dart

@@ -172,6 +172,16 @@ class NaviPaneState extends State<NaviPane>
   @override
   Widget build(BuildContext context) {
     onRebuild(context);
+    final mq = MediaQuery.of(context);
+    final sideInsets =
+        (App.isMobile && mq.orientation == Orientation.landscape)
+            ? EdgeInsets.only(
+                left: math.max(
+                    mq.viewPadding.left, mq.systemGestureInsets.left),
+                right: math.max(
+                    mq.viewPadding.right, mq.systemGestureInsets.right),
+              )
+            : EdgeInsets.zero;
     return _NaviPopScope(
       action: () {
         if (App.mainNavigatorKey!.currentState!.canPop()) {
@@ -185,7 +195,7 @@ class NaviPaneState extends State<NaviPane>
         animation: controller,
         builder: (context, child) {
           final value = controller.value;
-          return Stack(
+          Widget content = Stack(
             children: [
               Positioned(
                 left: _kFoldedSideBarWidth * ((value - 2.0).clamp(-1.0, 0.0)),
@@ -202,6 +212,13 @@ class NaviPaneState extends State<NaviPane>
               ),
             ],
           );
+          if (sideInsets != EdgeInsets.zero) {
+            content = Padding(
+              padding: sideInsets,
+              child: content,
+            );
+          }
+          return content;
         },
       ),
     );

lib/pages/reader/images.dart

@@ -286,8 +286,9 @@ class _GalleryModeState extends State<_GalleryMode>
               );
             }
 
+            final viewportSize = MediaQuery.of(context).size;
             return PhotoViewGalleryPageOptions.customChild(
-              childSize: reader.size * 2,
+              childSize: viewportSize,
               controller: photoViewControllers[index],
               minScale: PhotoViewComputedScale.contained * 1.0,
               maxScale: PhotoViewComputedScale.covered * 10.0,

lib/pages/reader/scaffold.dart

@@ -166,40 +166,49 @@ class _ReaderScaffoldState extends State<_ReaderScaffold> {
         decoration: BoxDecoration(
           color: context.colorScheme.surface.toOpacity(0.92),
           border: Border(
-            bottom: BorderSide(color: Colors.grey.toOpacity(0.5), width: 0.5),
+            bottom: BorderSide(
+              color: Colors.grey.toOpacity(0.5),
+              width: 0.5,
+            ),
           ),
         ),
-        child: Row(
+        child: Padding(
-          children: [
+          padding: EdgeInsets.only(
-            const SizedBox(width: 8),
+            left: context.padding.left,
-            const BackButton(),
+            right: context.padding.right,
-            const SizedBox(width: 8),
+          ),
-            Expanded(
+          child: Row(
-              child: Text(
+            children: [
-                context.reader.widget.name,
+              const SizedBox(width: 8),
-                style: ts.s18,
+              const BackButton(),
-                maxLines: 1,
+              const SizedBox(width: 8),
-                overflow: TextOverflow.ellipsis,
+              Expanded(
-              ),
+                child: Text(
-            ),
+                  context.reader.widget.name,
-            const SizedBox(width: 8),
+                  style: ts.s18,
-            if (shouldShowChapterComments())
+                  maxLines: 1,
-              Tooltip(
+                  overflow: TextOverflow.ellipsis,
-                message: "Chapter Comments".tl,
-                child: IconButton(
-                  icon: const Icon(Icons.comment),
-                  onPressed: openChapterComments,
                 ),
               ),
-            Tooltip(
+              const SizedBox(width: 8),
-              message: "Settings".tl,
+              if (shouldShowChapterComments())
-              child: IconButton(
+                Tooltip(
-                icon: const Icon(Icons.settings),
+                  message: "Chapter Comments".tl,
-                onPressed: openSetting,
+                  child: IconButton(
+                    icon: const Icon(Icons.comment),
+                    onPressed: openChapterComments,
+                  ),
+                ),
+              Tooltip(
+                message: "Settings".tl,
+                child: IconButton(
+                  icon: const Icon(Icons.settings),
+                  onPressed: openSetting,
+                ),
               ),
-            ),
+              const SizedBox(width: 8),
-            const SizedBox(width: 8),
+            ],
-          ],
+          ),
         ),
       ),
     );
@@ -520,7 +529,13 @@ class _ReaderScaffoldState extends State<_ReaderScaffold> {
               : null,
         ),
         padding: EdgeInsets.only(bottom: context.padding.bottom),
-        child: child,
+        child: Padding(
+          padding: EdgeInsets.only(
+            left: context.padding.left,
+            right: context.padding.right,
+          ),
+          child: child,
+        ),
       ),
     );
   }
@@ -713,11 +728,12 @@ class _ReaderScaffoldState extends State<_ReaderScaffold> {
   }
 
   Widget buildEpChangeButton() {
+    final extraWidth = context.padding.left + context.padding.right;
     if (context.reader.widget.chapters == null) return const SizedBox();
     switch (showFloatingButtonValue) {
       case 0:
         return Container(
-          width: 58,
+          width: 58 + extraWidth,
           height: 58,
           clipBehavior: Clip.antiAlias,
           decoration: BoxDecoration(
@@ -735,7 +751,7 @@ class _ReaderScaffoldState extends State<_ReaderScaffold> {
       case -1:
       case 1:
         return SizedBox(
-          width: 58,
+          width: 58 + extraWidth,
           height: 58,
           child: Material(
             color: Theme.of(context).colorScheme.primaryContainer,

lib/pages/settings/setting_components.dart

@@ -385,17 +385,16 @@ class _SliderSettingState extends State<_SliderSetting> {
                 : appdata.settings.getReaderSetting(
                     widget.comicId!,
                     widget.comicSource!,
-                    widget.settingsIndex,
+                  widget.settingsIndex,
-                  ))
+                ))
             .toDouble();
     return ListTile(
-      title: Row(
+      title: Text(
-        children: [
+        widget.title,
-          Text(widget.title),
+        softWrap: true,
-          const Spacer(),
+        maxLines: 2,
-          Text(value.toString(), style: ts.s12),
-        ],
       ),
+      trailing: Text(value.toString(), style: ts.s12),
       subtitle: Slider(
         value: value,
         onChanged: (value) {