Refactor homepage layout and styles

- Updated the main content rendering in `index.py` to use a `Div` for the homepage grid layout instead of `Grid`.
- Added CSS styles for the new `.homepage-grid` class to implement a responsive grid layout for batch cards.

Author: andrewm4894

dashboard/routes/index.py

@@ -1,4 +1,3 @@
-
 from fasthtml.common import *
 from monsterui.all import *
 from fasthtml.svg import *
@@ -97,13 +96,12 @@ def _create_main_content(batch_stats: dict, sorted_batch_names: list) -> Div:
                     cls="mb-6",
                 )
                 if not app.state.metric_batches
-                else Grid(
+                else Div(
                     *[
                         create_batch_card(name, batch_stats[name])
                         for name in sorted_batch_names
                     ],
-                    cols=4,
-                    gap=2,
+                    cls="homepage-grid",
                 )
             ),
             cls="p-2",

dashboard/static/styles.css

@@ -1,4 +1,3 @@
-
 /* Mobile-first approach */
 * {
     box-sizing: border-box;
@@ -260,3 +259,18 @@ body.dark-mode .uk-toggle-switch:checked {
 body.dark-mode .uk-toggle-switch::before {
     background-color: #e5e7eb;
 }
+
+/* Homepage grid layout */
+.homepage-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+}
+
+/* Ensure cards have consistent width on homepage */
+.homepage-grid .uk-card {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 0;
+}