From ba0a80a8ad04e9dc2e1ae1d83d556c2a2d2f629c Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 11 Mar 2026 07:39:32 -0700
Subject: [PATCH] Fix: prevent wrapping with larger amounts of tags on small
 cards, reset moreTags setting to correct count (#12302)

---
 .../document-card-small.component.html                 |  2 +-
 .../document-card-small.component.scss                 | 10 ++++++++++
 .../document-card-small.component.spec.ts              | 10 ++++++++++
 .../document-card-small.component.ts                   |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)

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 b154324c7..b3a29aed4 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
@@ -15,7 +15,7 @@
       }
 
       @if (document && displayFields?.includes(DisplayField.TAGS)) {
-        <div class="tags d-flex flex-column text-end position-absolute me-1 fs-6">
+        <div class="tags d-flex flex-column text-end position-absolute me-1 fs-6" [class.tags-no-wrap]="document.tags.length > 3">
           @for (tagID of tagIDs; track tagID) {
             <pngx-tag [tagID]="tagID" (click)="clickTag.emit(tagID);$event.stopPropagation()" [clickable]="true" linkTitle="Toggle tag filter" i18n-linkTitle></pngx-tag>
           }
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 508c5251a..dce77802e 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
@@ -72,4 +72,14 @@ a {
   max-width: 80%;
   row-gap: .2rem;
   line-height: 1;
+
+  &.tags-no-wrap {
+    ::ng-deep .badge {
+      display: inline-block;
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
index 63cfc5a50..982b3980b 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
@@ -82,6 +82,16 @@ describe('DocumentCardSmallComponent', () => {
     ).toHaveLength(6)
   })
 
+  it('should clear hidden tag counter when tag count falls below the limit', () => {
+    expect(component.moreTags).toEqual(3)
+
+    component.document.tags = [1, 2, 3, 4, 5, 6]
+    fixture.detectChanges()
+
+    expect(component.moreTags).toBeNull()
+    expect(fixture.nativeElement.textContent).not.toContain('+ 3')
+  })
+
   it('should try to close the preview on mouse leave', () => {
     component.popupPreview = {
       close: jest.fn(),
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
index ad428dfab..05f84d752 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -126,6 +126,7 @@ export class DocumentCardSmallComponent
       this.moreTags = this.document.tags.length - (limit - 1)
       return this.document.tags.slice(0, limit - 1)
     } else {
+      this.moreTags = null
       return this.document.tags
     }
   }