New Responsive design

app/Domains/Event/Views/Partials/ParticipationSummary.vue

@@ -1,7 +1,7 @@
 <script setup>
- const props = defineProps({
-     event: Object
- })
+const props = defineProps({
+    event: Object
+})
 </script>
 
 <template>
@@ -68,8 +68,6 @@
                         </td>
                     </tr>
 
-
-
                     <tr>
                         <th colspan="2" style="border-width: 1px; border-bottom-style: solid">Gesamt</th>
                         <td style="font-weight: bold; border-width: 1px; border-bottom-style: solid">
@@ -117,7 +115,6 @@
         </div>
 
     </div>
-
 </template>
 
 <style scoped>
@@ -131,22 +128,22 @@
 
 .participant-flexbox-row {
     display: flex;
-    gap: 10px; /* Abstand zwischen den Spalten */
+    gap: 20px;
+    flex-wrap: wrap;
 }
 
-.participant-flexbox-row.top .left {
-    flex: 0 0 50%;
-    padding: 10px;
-}
-
-.participant-flexbox.top .right {
-    flex: 0 0 50%;
+.participant-flexbox-row.top .left,
+.participant-flexbox-row.top .right {
+    flex: 1 1 280px;
     padding: 10px;
+    min-width: 0;
 }
 
 .participant-income-table,
 .event-payment-table {
-    width: 475px;
+    width: 100%;
+    max-width: 475px;
+    table-layout: auto;
 }
 
 .participant-income-table th {
@@ -162,4 +159,5 @@
 .event-payment-table {
     width: 100%;
 }
+
 </style>