Merge pull request #6121 from KhaoulaMaleh/updates

fixed text truncation

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: hidden;
-  overflow-y: 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 {
+#header-quick-access ul.header-quick-access-list {
-  background: transparent;
+  -ms-overflow-style: none; /* IE and Edge */
-}
+  scrollbar-width: none; /* Firefox */
-
-#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 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 {

client/components/main/header.jade

@@ -64,9 +64,9 @@ template(name="header")
               a(href="{{pathFor 'board' id=_id slug=slug}}")
                 +viewer
                   = title
-          //else
+          else
-          //  li.current.empty
+            li.current.empty(title="{{_ 'quick-access-description'}}")
-          //    {{_ '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.

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+) */

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;
+}