feat: alphabet list, change Layout etc

lib/views/bar/product_grid.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -111,33 +113,36 @@ class ProductGrid extends StatelessWidget {
         Expanded(
           child: LayoutBuilder(
             builder: (context, constraints) {
-              const horizontalPadding = 32.0;
-              const verticalPadding = 28.0;
+              const padding = EdgeInsets.fromLTRB(16, 12, 16, 16);
               const spacing = 12.0;
+              const minTileHeight = 72.0;
+
+              // Exactly [rows] rows fill the height; the column count keeps
+              // the tiles as close to square as the width allows
               final rowCount = rows.clamp(2, 6).toInt();
-              final rowHeight =
-                  ((constraints.maxHeight -
-                              verticalPadding -
-                              (rowCount - 1) * spacing) /
-                          rowCount)
-                      .clamp(96.0, 320.0)
-                      .toDouble();
-              final columns =
-                  (((constraints.maxWidth - horizontalPadding + spacing) /
-                              (rowHeight + spacing))
-                          .ceil())
-                      .clamp(2, 8)
-                      .toInt();
+              final tileHeight = max(
+                minTileHeight,
+                (constraints.maxHeight -
+                        padding.vertical -
+                        (rowCount - 1) * spacing) /
+                    rowCount,
+              );
+              final columns = max(
+                1,
+                ((constraints.maxWidth - padding.horizontal + spacing) /
+                        (tileHeight + spacing))
+                    .round(),
+              );
 
               return GridView.builder(
-                key: ValueKey('product-grid-$rows'),
-                padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
+                key: ValueKey('product-grid-$rowCount'),
+                padding: padding,
                 itemCount: products.length,
                 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                   crossAxisCount: columns,
-                  crossAxisSpacing: 12,
-                  mainAxisSpacing: 12,
-                  childAspectRatio: 1,
+                  crossAxisSpacing: spacing,
+                  mainAxisSpacing: spacing,
+                  mainAxisExtent: tileHeight,
                 ),
                 itemBuilder: (context, index) {
                   final product = products[index];