Update css on item cards

app/Filament/Pages/Reserve.php

@@ -75,7 +75,7 @@ class Reserve extends BasePage implements HasTable
                         ->disk('public')
                         ->size('100%')
                         ->extraImgAttributes([
-                            'class' => 'rounded-md',
+                            'class' => 'reserve-card-image',
                             'loading' => 'lazy'
                         ]),
                         //->visibility('private'),
@@ -105,9 +105,9 @@ class Reserve extends BasePage implements HasTable
                                 ->prefix('Ålder: ')
                                 //->suffix(' år'),
                         ])
-                        ->extraAttributes(['class' => 'space-y-3 h-full'])
+                        ->extraAttributes(['class' => 'reserve-card-meta'])
                         ->hidden(fn ($record) => $record->type === 'literature'),
-                    ])->extraAttributes(['class' => 'space-y-3 h-full'])  
+                    ])->extraAttributes(['class' => 'reserve-card'])
                     
                 ])
             ])

resources/views/filament/pages/reserve.blade.php

@@ -1,4 +1,30 @@
 <x-filament-panels::page>
+    <style>
+        /* Luftigare kort: mellanrum runt statusbadge, bild, rubrik och detaljer */
+        .reserve-card {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            height: 100%;
+        }
+
+        .reserve-card-meta {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            height: 100%;
+        }
+
+        .reserve-card-image {
+            border-radius: 0.5rem;
+        }
+
+        .reserve-card > * + *,
+        .reserve-card-meta > * + * {
+            margin-top: 0 !important;
+        }
+    </style>
+
     <p class="text-sm text-gray-500 dark:text-gray-400 -mt-4">
         Välkommen! Här kan du reservera spel som du gärna vill låna.
     </p>