fixes element sizes

mobile/lib/modules/album/ui/album_thumbnail_card.dart

@@ -20,89 +20,93 @@ class AlbumThumbnailCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var box = Hive.box(userInfoBox);
-    var cardSize = MediaQuery.of(context).size.width / 2 - 18;
     var isDarkMode = Theme.of(context).brightness == Brightness.dark;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+      var cardSize = constraints.maxWidth / 2 - 18;
 
-    buildEmptyThumbnail() {
-      return Container(
-        decoration: BoxDecoration(
-          color: isDarkMode ? Colors.grey[800] : Colors.grey[200],
-        ),
-        child: SizedBox(
-          height: cardSize,
-          width: cardSize,
-          child: const Center(
-            child: Icon(Icons.no_photography),
+      buildEmptyThumbnail() {
+        return Container(
+          decoration: BoxDecoration(
+            color: isDarkMode ? Colors.grey[800] : Colors.grey[200],
           ),
-        ),
-      );
-    }
+          child: SizedBox(
+            height: cardSize,
+            width: cardSize,
+            child: const Center(
+              child: Icon(Icons.no_photography),
+            ),
+          ),
+        );
+      }
 
-    buildAlbumThumbnail() {
-      return CachedNetworkImage(
-        width: cardSize,
-        height: cardSize,
-        fit: BoxFit.cover,
-        fadeInDuration: const Duration(milliseconds: 200),
-        imageUrl: getAlbumThumbnailUrl(
-          album,
-          type: ThumbnailFormat.JPEG,
-        ),
-        httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-        cacheKey: getAlbumThumbNailCacheKey(album, type: ThumbnailFormat.JPEG),
-      );
-    }
+      buildAlbumThumbnail() {
+        return CachedNetworkImage(
+          width: cardSize,
+          height: cardSize,
+          fit: BoxFit.cover,
+          fadeInDuration: const Duration(milliseconds: 200),
+          imageUrl: getAlbumThumbnailUrl(
+            album,
+            type: ThumbnailFormat.JPEG,
+          ),
+          httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+          cacheKey: getAlbumThumbNailCacheKey(album, type: ThumbnailFormat.JPEG),
+        );
+      }
 
-    return GestureDetector(
-      onTap: () {
-        AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
-      },
-      child: Padding(
-        padding: const EdgeInsets.only(bottom: 32.0),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            ClipRRect(
-              borderRadius: BorderRadius.circular(8),
-              child: album.albumThumbnailAssetId == null
-                  ? buildEmptyThumbnail()
-                  : buildAlbumThumbnail(),
-            ),
-            Padding(
-              padding: const EdgeInsets.only(top: 8.0),
-              child: SizedBox(
-                width: cardSize,
-                child: Text(
-                  album.name,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.bold,
+      return GestureDetector(
+        onTap: () {
+          AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
+        },
+        child: Padding(
+          padding: const EdgeInsets.only(bottom: 32.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ClipRRect(
+                borderRadius: BorderRadius.circular(8),
+                child: album.albumThumbnailAssetId == null
+                    ? buildEmptyThumbnail()
+                    : buildAlbumThumbnail(),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 8.0),
+                child: SizedBox(
+                  width: cardSize,
+                  child: Text(
+                    album.name,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
               ),
-            ),
-            Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Text(
-                  album.assetCount == 1
-                      ? 'album_thumbnail_card_item'
-                      : 'album_thumbnail_card_items',
-                  style: const TextStyle(
-                    fontSize: 12,
-                  ),
-                ).tr(args: ['${album.assetCount}']),
-                if (album.shared)
-                  const Text(
-                    'album_thumbnail_card_shared',
-                    style: TextStyle(
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    album.assetCount == 1
+                        ? 'album_thumbnail_card_item'
+                        : 'album_thumbnail_card_items',
+                    style: const TextStyle(
                       fontSize: 12,
                     ),
-                  ).tr()
-              ],
-            )
-          ],
+                  ).tr(args: ['${album.assetCount}']),
+                  if (album.shared)
+                    const Text(
+                      'album_thumbnail_card_shared',
+                      style: TextStyle(
+                        fontSize: 12,
+                      ),
+                    ).tr()
+                ],
+              )
+            ],
+          ),
         ),
-      ),
+      );
+      },
     );
   }
 }

mobile/lib/modules/album/views/library_page.dart

@@ -116,22 +116,26 @@ class LibraryPage extends HookConsumerWidget {
           mainAxisAlignment: MainAxisAlignment.start,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Container(
-              width: MediaQuery.of(context).size.width / 2 - 18,
-              height: MediaQuery.of(context).size.width / 2 - 18,
-              decoration: BoxDecoration(
-                border: Border.all(
-                  color: Colors.grey,
-                ),
-                borderRadius: BorderRadius.circular(8),
-              ),
-              child: Center(
-                child: Icon(
-                  Icons.add_rounded,
-                  size: 28,
-                  color: Theme.of(context).primaryColor,
-                ),
-              ),
+            LayoutBuilder(
+              builder: (context, constraints) {
+                return Container(
+                  width: constraints.maxWidth / 2 - 18,
+                  height: constraints.maxWidth / 2 - 18,
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                      color: Colors.grey,
+                    ),
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: Center(
+                    child: Icon(
+                      Icons.add_rounded,
+                      size: 28,
+                      color: Theme.of(context).primaryColor,
+                    ),
+                  ),
+                );
+              }
             ),
             Padding(
               padding: const EdgeInsets.only(top: 8.0),