Formatting and Share Buttons

resources/js/Components/FlightsGoneBy/GenericBadgeTable.vue

@@ -4,6 +4,7 @@ defineProps<{
     rowKey: (row: T) => string | number
     hasItems: (row: T) => boolean
     labelWidth?: string
+    compactOnMobile?: boolean
 }>()
 </script>
 
@@ -15,7 +16,11 @@ defineProps<{
             class="badge-row"
         >
             <!-- Label column: consumer provides content -->
-            <div class="badge-label" :style="labelWidth ? `width: ${labelWidth}` : ''">
+            <div
+                class="badge-label"
+                :class="{ 'badge-label--compact': compactOnMobile }"
+                :style="labelWidth ? `width: ${labelWidth}` : ''"
+            >
                 <slot name="label" :row="row" />
             </div>
 
@@ -38,8 +43,6 @@ defineProps<{
     container-type: inline-size;
 }
 
-
-
 .badge-row {
     display: flex;
     align-items: center;
@@ -49,13 +52,13 @@ defineProps<{
 
 .badge-label {
     flex: 0 0 auto;
-    width: 15em;
+    width: 21em;
     padding: 0.5em;
     border-right: 1px solid var(--table-border);
     align-self: stretch;
     display: flex;
     align-items: center;
-    font-size:0.9rem;
+    font-size: 0.9rem;
 }
 
 @container (max-width: 480px) {
@@ -63,6 +66,12 @@ defineProps<{
         font-size: 0.75rem;
         width: 9em;
     }
+
+    .badge-label--compact {
+        font-size: 0.7rem;
+        width: clamp(6em, 50cqw, 9em);
+        flex-shrink: 0;
+    }
 }
 
 .badge-scroll-container {