From 143b2250198c4de99bd0334bccd996c6e3d2a621 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 4 Sep 2026 09:27:10 -0700
Subject: [PATCH] Fix: also correct unbroken long names on small cards

---
 .../document-card-small.component.html                    | 8 ++++----
 .../document-card-small.component.scss                    | 5 +++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index d1b99708e..e251e6211 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -60,16 +60,16 @@
       <div class="list-group list-group-flush border-0 pt-1 pb-2 card-info">
          @if (document()) {
           @if (displayFields().includes(DisplayField.DOCUMENT_TYPE) && document().document_type) {
-            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle document type filter" i18n-title
+            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0 d-flex align-items-start" title="Toggle document type filter" i18n-title
               (click)="clickDocumentType.emit(document().document_type);$event.stopPropagation()">
-              <i-bs width="1em" height="1em" class="me-2 text-muted" name="file-earmark"></i-bs>
+              <i-bs width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="file-earmark"></i-bs>
               <small>{{document().document_type | documentTypeName | async}}</small>
             </button>
           }
           @if (displayFields().includes(DisplayField.STORAGE_PATH) && document().storage_path) {
-            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle storage path filter" i18n-title
+            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0 d-flex align-items-start" title="Toggle storage path filter" i18n-title
               (click)="clickStoragePath.emit(document().storage_path);$event.stopPropagation()">
-              <i-bs width="1em" height="1em" class="me-2 text-muted" name="folder"></i-bs>
+              <i-bs width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="folder"></i-bs>
               <small>{{document().storage_path | storagePathName | async}}</small>
             </button>
           }
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index 9dd7ed5cf..d098b126b 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -69,6 +69,11 @@
   button {
     line-height: 1;
 
+    small {
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
     &:hover,
     &:focus {
       background-color: transparent !important;