Refactor ProspectContainer and ProspectGrid: adjust layout styles and add grid class for improved responsiveness

FoodsharingSiegen.Server/Controls/ProspectContainer.razor.css

@@ -16,18 +16,16 @@
 .pc-main {
     display: flex;
     flex-direction: column;
-    flex-basis: 0;
-    flex-grow: 1;
-    max-width: 480px;
+    height: 100%;
+    width: 100%;
+    max-width: none;
     border-radius: 12px;
-    margin: 15px;
+    margin: 0;
     padding: 1rem 1rem 0 1rem;
 }
 
 @media (max-width: 576px) {
     .pc-main {
-        margin-left: 0;
-        margin-right: 0;
         padding: .5rem .5rem 0 .5rem;
     }
 }

FoodsharingSiegen.Server/Controls/ProspectGrid.razor

@@ -7,12 +7,14 @@
   
   [Parameter] public Func<Task>? OnDataChanged { get; set; }
 
+  [Parameter] public string GridClass { get; set; } = string.Empty;
+
 }
 <h6>@(Prospects?.Count ?? 0) Ergebnisse</h6>
 
 @if (Prospects?.Any() == true)
 {
-  <div class="row m-0">
+  <div class="prospect-grid @GridClass">
     <Repeater Items="@Prospects">
       <ProspectContainer 
         Prospect="context" 

FoodsharingSiegen.Server/Controls/ProspectGrid.razor.css

@@ -0,0 +1,12 @@
+.prospect-grid {
+    /* Default card width range. Override via a modifier class on ProspectGrid. */
+    --pc-min-width: 200px;
+    --pc-max-width: 350px;
+
+    display: grid;
+    gap: 1rem;
+    width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pc-min-width)), var(--pc-max-width)));
+    justify-content: center;
+    align-items: stretch;
+}