From 651a0c72f10d837e6bc183efa08502ef26db0264 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 7 Feb 2026 00:11:33 -0800
Subject: [PATCH] nav-underline

---
 .../document-attributes.component.html        |  6 ++--
 .../document-attributes.component.scss        | 34 +++++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
index fc30707ce..9e7578428 100644
--- a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
+++ b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
@@ -62,17 +62,17 @@
   }
 </pngx-page-header>
 
-<ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-tabs">
+<ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-underline">
   @for (section of visibleSections; track section.id) {
     <li [ngbNavItem]="section.id">
-      <a ngbNavLink>
+      <a ngbNavLink >
         <i-bs class="me-2" [name]="section.icon"></i-bs>{{ section.label }}
       </a>
     </li>
   }
 </ul>
 
-<div class="border-start border-end border-bottom p-3 mb-3 shadow-sm">
+<div class="my-3 shadow-sm">
   <ng-container
     [ngComponentOutlet]="activeSection?.component"
     #activeOutlet="ngComponentOutlet"
diff --git a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.scss b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.scss
index e69de29bb..16a224aa8 100644
--- a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.scss
+++ b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.scss
@@ -0,0 +1,34 @@
+// .attributes-tabs {
+//   border-bottom-color: rgba(var(--bs-body-color-rgb), 0.12);
+// }
+
+// .attributes-tabs .nav-link {
+//   position: relative;
+//   padding-bottom: 0.45rem;
+//   color: rgba(var(--bs-body-color-rgb));
+//   transition: color 140ms ease;
+// }
+
+// .attributes-tabs .nav-link::after {
+//   content: '';
+//   position: absolute;
+//   left: 0.2rem;
+//   right: 0.2rem;
+//   bottom: 0;
+//   height: var(--bs-nav-underline-border-width);
+//   border-radius: 1px;
+//   background: transparent;
+//   transition: background-color 140ms ease;
+// }
+
+// .attributes-tabs .nav-link:hover {
+//   color: rgba(var(--bs-body-color-rgb), 0.95);
+// }
+
+// .attributes-tabs .nav-link.active {
+//   color: var(--bs-primary);
+// }
+
+// .attributes-tabs .nav-link.active::after {
+//   background: var(--bs-primary);
+// }