From 19237ca7cead074c41b408fc58843f21d5ef74ac Mon Sep 17 00:00:00 2001
From: KhaoulaMaleh <khaoulamaleh03@gmail.com>
Date: Mon, 2 Feb 2026 19:29:08 -1100
Subject: [PATCH] fixed text truncation

---
 client/components/main/header.css  | 30 +++++++++++++-----------------
 client/components/main/header.jade |  6 +++---
 client/components/main/layouts.css |  5 +++++
 custom-header-fix.css              | 19 +++++++++++++++++++
 4 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 custom-header-fix.css

diff --git a/client/components/main/header.css b/client/components/main/header.css
index 14045d259..450a72aeb 100644
--- a/client/components/main/header.css
+++ b/client/components/main/header.css
@@ -177,8 +177,7 @@
 }
 #header-quick-access ul.header-quick-access-list {
   transition: opacity 0.2s;
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: hidden;
   white-space: nowrap;
   padding: 10px;
   margin: -10px;
@@ -186,26 +185,16 @@
   min-width: 0; /* Allow shrinking below content size */
   display: flex; /* Use flexbox for better control */
   align-items: center;
-  scrollbar-width: thin; /* Firefox */
-  scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Firefox */
 }
 
-/* Webkit scrollbar styling for better UX */
+/* Hide scrollbar completely */
 #header-quick-access ul.header-quick-access-list::-webkit-scrollbar {
-  height: 4px;
+  display: none;
 }
 
-#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 2px;
-}
-
-#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.5);
+#header-quick-access ul.header-quick-access-list {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 #header-quick-access ul.header-quick-access-list li {
   display: inline-block; /* Keep inline-block for proper spacing */
@@ -233,6 +222,13 @@
 }
 #header-quick-access ul.header-quick-access-list li.current.empty {
   padding: 12px 10px 12px 10px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+  opacity: 0.85;
+  font-style: italic;
 }
 #header-quick-access ul.header-quick-access-list li:first-child .fa-home,
 #header-quick-access ul.header-quick-access-list li:nth-child(3) .fa-globe {
diff --git a/client/components/main/header.jade b/client/components/main/header.jade
index fd3087732..77ccb93ab 100644
--- a/client/components/main/header.jade
+++ b/client/components/main/header.jade
@@ -64,9 +64,9 @@ template(name="header")
               a(href="{{pathFor 'board' id=_id slug=slug}}")
                 +viewer
                   = title
-          //else
-          //  li.current.empty
-          //    {{_ 'quick-access-description'}}
+          else
+            li.current.empty(title="{{_ 'quick-access-description'}}")
+              {{_ 'quick-access-description'}}
         #header-new-board-icon
       // Next line is used only for spacing at header,
       // there is no visible clickable icon.
diff --git a/client/components/main/layouts.css b/client/components/main/layouts.css
index 8847291fb..e646e1b78 100644
--- a/client/components/main/layouts.css
+++ b/client/components/main/layouts.css
@@ -720,6 +720,11 @@ a:not(.disabled).is-active i.fa {
   .setting-content .content-body .side-menu {
     width: 250px;
   }
+  
+  /* Responsive handling for quick-access description on tablets */
+  #header-quick-access ul.header-quick-access-list li.current.empty {
+    max-width: 300px;
+  }
 }
 
 /* Large displays and digital signage (1920px+) */
diff --git a/custom-header-fix.css b/custom-header-fix.css
new file mode 100644
index 000000000..e51ae72a7
--- /dev/null
+++ b/custom-header-fix.css
@@ -0,0 +1,19 @@
+/* Fix for text truncation in header quick-access - override */
+#header-quick-access ul.header-quick-access-list {
+  overflow: hidden !important;
+  overflow-x: hidden !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+#header-quick-access ul.header-quick-access-list li.current.empty {
+  flex: 1 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  max-width: none !important;
+}