Adjust gallery layout

lib/components/gallery_basic_info.dart

@@ -18,6 +18,7 @@ class GalleryBasicInfo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final cs = Theme.of(context).colorScheme;
+    final max = (300 * MediaQuery.of(context).devicePixelRatio).toInt();
     return SizedBox(
         height: 300,
         child: Column(children: [
@@ -28,11 +29,14 @@ class GalleryBasicInfo extends StatelessWidget {
                 child: Container(
                   margin: const EdgeInsets.only(right: 8),
                   child: firstPage != null
-                      ? Thumbnail(firstPage!,
+                      ? Thumbnail(
+                          firstPage!,
                           fileId: fileId,
                           gid: gMeta.gid,
                           key: Key(
-                              "thumbnail${gMeta.gid}-${firstPage!.index}-$fileId"))
+                              "thumbnail${gMeta.gid}-${firstPage!.index}-$fileId-$max"),
+                          max: max,
+                        )
                       : Container(),
                 )),
             Expanded(

lib/components/gallery_info.dart

@@ -134,8 +134,14 @@ class _GalleryInfo extends State<GalleryInfo> with ThemeModeWidget {
             : SliverToBoxAdapter(child: Container()),
         ThumbnailGridView(
             widget.gData,
-            SliverGridDelegateWithFixedCrossAxisCount(
-                crossAxisCount: useMobile ? 2 : 5),
+            useMobile
+                ? const SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: 2)
+                : const SliverGridDelegateWithMaxCrossAxisExtent(
+                    maxCrossAxisExtent: 400,
+                    childAspectRatio: 1,
+                    crossAxisSpacing: 10,
+                    mainAxisSpacing: 10),
             files: widget.files,
             gid: widget.gData.meta.gid,
             isSelectMode: widget.isSelectMode,

lib/components/gallery_info_desktop.dart

@@ -51,6 +51,7 @@ class GalleryInfoDesktop extends StatelessWidget {
     final cs = Theme.of(context).colorScheme;
     final i18n = AppLocalizations.of(context)!;
     final locale = MainApp.of(context).lang.toLocale().toString();
+    final max = (400 * MediaQuery.of(context).devicePixelRatio).toInt();
     return Container(
         alignment: Alignment.topCenter,
         child: SizedBox(
@@ -62,11 +63,14 @@ class GalleryInfoDesktop extends StatelessWidget {
                   child: Padding(
                       padding: const EdgeInsets.only(right: 8.0),
                       child: gData.pages.isNotEmpty
-                          ? Thumbnail(gData.pages.first,
+                          ? Thumbnail(
+                              gData.pages.first,
                               key: Key(
-                                  "thumbnail${gData.meta.gid}-${gData.pages.first.index}-$fileId"),
+                                  "thumbnail${gData.meta.gid}-${gData.pages.first.index}-$fileId-$max"),
                               fileId: fileId,
-                              gid: gData.meta.gid)
+                              gid: gData.meta.gid,
+                              max: max,
+                            )
                           : Container())),
               Expanded(
                   flex: 7,

lib/components/thumbnail_gridview.dart

@@ -25,6 +25,13 @@ class ThumbnailGridView extends StatelessWidget {
     final displayAd = prefs.getBool("displayAd") ?? false;
     final npages =
         displayAd ? gdata.pages : gdata.pages.where((e) => !e.isAd).toList();
+    final maxWidth = MediaQuery.of(context).size.width;
+    final baseSize = maxWidth > 810
+        ? 400
+        : maxWidth < 400
+            ? 200
+            : 300;
+    final max = (baseSize * MediaQuery.of(context).devicePixelRatio).toInt();
     return SliverGrid.builder(
         gridDelegate: gridDelegate,
         itemCount: npages.length,
@@ -32,7 +39,7 @@ class ThumbnailGridView extends StatelessWidget {
           final page = npages[index]!;
           final fileId =
               files != null ? files!.files[page.token]!.firstOrNull?.id : null;
-          final key = Key("thumbnail$gid-${page.index}-$fileId");
+          final key = Key("thumbnail$gid-${page.index}-$fileId-$max");
           return Container(
               padding: const EdgeInsets.all(4),
               child: Thumbnail(
@@ -55,6 +62,7 @@ class ThumbnailGridView extends StatelessWidget {
                     onSelectedChange!();
                   }
                 },
+                max: max,
               ));
         });
   }