From 217b004884fe0c29a1102533db50801ea9cafc6c Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 18 Aug 2025 08:08:25 -0700
Subject: [PATCH] Fix: ensure saved view count is visible with long names
 (#10616)

---
 .../components/app-frame/app-frame.component.html   | 13 +++++++------
 .../components/app-frame/app-frame.component.scss   |  4 ++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index abf47d459..faf55b802 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -108,15 +108,16 @@
                 <li class="nav-item w-100 app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
                   cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
                   (cdkDragEnded)="onDragEnd($event)">
-                  <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
+                  <a class="nav-link" routerLink="view/{{view.id}}"
                     routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
                     [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                     popoverClass="popover-slim">
-                    <i-bs class="me-1" name="funnel"></i-bs><span>&nbsp;{{view.name}}
-                      @if (showSidebarCounts && !slimSidebarEnabled) {
-                        <span><span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span></span>
-                      }
-                    </span>
+                    <i-bs class="me-1" name="funnel"></i-bs>
+                      <span>&nbsp;<div class="d-inline-flex view-name"><span [class.text-truncate]="!slimSidebarEnabled">{{view.name}}</span></div>
+                        @if (showSidebarCounts && !slimSidebarEnabled) {
+                          <span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span>
+                        }
+                      </span>
                     @if (showSidebarCounts && slimSidebarEnabled) {
                       <span class="badge bg-info text-dark position-absolute top-0 end-0 d-none d-md-block">{{ savedViewService.getDocumentCount(view) }}</span>
                     }
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index e493f369d..9bd8738ff 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -19,6 +19,10 @@
     height: 0.8em;
   }
 
+  .view-name {
+    max-width: calc(100% - 50px)
+  }
+
   .nav-group:not(:has(.app-link)) .sidebar-heading {
     display: none !important;
   }