From 627fcfbfde517317283768d59d4ccceed00ba376 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 08:18:19 +0000
Subject: [PATCH] UI fixes

---
 .../documents/pages/DocumentVaultPage.tsx     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
index d7605054a..82313ad9c 100644
--- a/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
+++ b/apps/portal/src/app/features/documents/pages/DocumentVaultPage.tsx
@@ -153,7 +153,7 @@ function IssuedDocumentCard({
             </Text>
           </div>
         </Group>
-        <Badge size="sm" variant="light" color={issued ? 'teal' : 'gray'}>
+        <Badge size="sm" variant="light" color={issued ? 'teal' : 'gray'} style={{ flexShrink: 0 }}>
           {t(`documents.documentStatus.${document.status}`, { defaultValue: document.status })}
         </Badge>
       </Group>
@@ -277,7 +277,10 @@ export function DocumentVaultPage() {
                     {t('documents.empty.licenses')}
                   </Text>
                 ) : (
-                  <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+                  // Two per row, not three: licence type names run long
+                  // ("Multimodal Transport Operator License") and a third
+                  // column truncates them.
+                  <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
                     {licenceItems.map((licence) => (
                       <LicenseCard
                         key={licence.id}
@@ -324,7 +327,12 @@ export function DocumentVaultPage() {
                           )}
                         </div>
                       </Group>
-                      <Badge size="sm" variant="light" color={RECORD_STATUS_COLOR[record.status]}>
+                      <Badge
+                        size="sm"
+                        variant="light"
+                        color={RECORD_STATUS_COLOR[record.status]}
+                        style={{ flexShrink: 0 }}
+                      >
                         {t(`seaRecords.columns.recordStatus.${record.status}`, {
                           defaultValue: record.status,
                         })}
@@ -390,7 +398,12 @@ export function DocumentVaultPage() {
                           )}
                         </div>
                       </Group>
-                      <Badge size="sm" variant="light" color={RECORD_STATUS_COLOR[record.status]}>
+                      <Badge
+                        size="sm"
+                        variant="light"
+                        color={RECORD_STATUS_COLOR[record.status]}
+                        style={{ flexShrink: 0 }}
+                      >
                         {t(`seaRecords.columns.recordStatus.${record.status}`, {
                           defaultValue: record.status,
                         })}
@@ -488,6 +501,7 @@ export function DocumentVaultPage() {
                             size="sm"
                             variant="light"
                             color={files.length ? 'teal' : slot.isRequired ? 'orange' : 'gray'}
+                            style={{ flexShrink: 0 }}
                           >
                             {files.length
                               ? t('documents.personal.uploaded')