Enhance InteractionRow and ProspectContainer: refactor layout to use grid, improve styling, and add interaction handling

FoodsharingSiegen.Server/Controls/ProspectContainer.razor

@@ -51,8 +51,7 @@
         </Alert>
     }
 
-    <table class="flex-column" style="width: 100%;">
-
+    <div class="interaction-grid mb-3">
         <InteractionRow
             Prospect="Prospect"
             Type="InteractionType.Welcome"
@@ -63,12 +62,6 @@
             IconClass="fa-solid fa-handshake-simple">
         </InteractionRow>
 
-        <tr>
-            <td colspan="3">
-                <hr style="margin: 10px 0;">
-            </td>
-        </tr>
-
         @if (!AppSettings.DisableStepIn)
         {
             <InteractionRow
@@ -94,12 +87,6 @@
             IconClass="fa-solid fa-basket-shopping">
         </InteractionRow>
 
-        <tr>
-            <td colspan="3">
-                <hr style="margin: 10px 0;">
-            </td>
-        </tr>
-
         <InteractionRow
             Prospect="Prospect"
             Type="InteractionType.ReleasedForVerification"
@@ -145,13 +132,13 @@
                 IconClass="fa-solid fa-user-check">
             </InteractionRow>
         }
-
-    </table>
+    </div>
     
     <div class="flex-grow-1"></div>
 
     @if(Prospect?.Images?.Count > 0)
-    {<div class="text-center mt-3">
+    {
+        <div class="text-center mt-3">
         <Badge Color="Color.Info" Style="margin-bottom: 0.5rem; cursor: pointer;" @onclick="OpenVerificationDialogAsync"><i class="fa-solid fa-address-card"></i>-Prüfung möglich</Badge></div>
     }