Fix Bug Member settings drops to the second line and overlaps when many boards are starred as favourites.

Thanks to xet7 !

Fixes #5943

client/components/boards/boardHeader.jade

@@ -237,6 +237,35 @@ template(name="createBoard")
       | /
       a.js-board-template {{_ 'template'}}
 
+template(name="createBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span 🌐
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span 🔒
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}
+
 //template(name="listsortPopup")
 //  h2
 //   | {{_ 'list-sort-by'}}

client/components/main/header.css

@@ -100,8 +100,9 @@
   z-index: 1000;
   padding: 10px 0px;
   align-items: center;
-  flex-wrap: wrap; /* Allow wrapping on mobile */
-  min-height: 28px; /* Allow height to grow */
+  flex-wrap: nowrap; /* Prevent wrapping to keep single row */
+  min-height: 28px;
+  overflow: hidden; /* Prevent content from overflowing */
 }
 #header-quick-access .home-icon {
   display: flex;
@@ -167,13 +168,39 @@
   white-space: nowrap;
   padding: 10px;
   margin: -10px;
+  flex: 1; /* Take up available space */
+  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 */
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar {
+  height: 4px;
+}
+
+#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 li {
-  display: inline;
+  display: inline-block; /* Keep inline-block for proper spacing */
   width: auto;
   color: #d9d9d9;
   padding: 12px 0px;
   margin: -10px 0px;
+  flex-shrink: 0; /* Prevent items from shrinking */
+  white-space: nowrap; /* Prevent text wrapping within items */
 }
 #header-quick-access ul.header-quick-access-list li a {
   padding: 12px 10px;
@@ -447,6 +474,8 @@
     transition: background-color 0.4s;
     width: 100%;
     z-index: 30;
+    flex-wrap: nowrap !important; /* Force single row on mobile */
+    overflow: hidden; /* Prevent content overflow */
   }
 
   /* Mobile home icon styling */
@@ -490,11 +519,12 @@
          screen and (max-width: 800px) and (orientation: portrait),
          screen and (max-width: 800px) and (orientation: landscape) {
     #header-quick-access {
-      height: auto !important; /* Allow height to grow */
+      height: 48px !important; /* Fixed height for mobile */
       min-height: 48px !important; /* Minimum height for mobile */
-      flex-wrap: wrap !important; /* Force wrapping */
-      align-items: flex-start !important; /* Align to top when wrapping */
+      flex-wrap: nowrap !important; /* Force single row */
+      align-items: center !important; /* Center align items */
       padding: 8px 0px !important; /* Adjust padding for mobile */
+      overflow: hidden !important; /* Prevent content overflow */
     }
     #header-quick-access {
       font-size: 2em !important; /* 2x bigger base font size */

client/components/main/layouts.js

@@ -92,6 +92,18 @@ Template.userFormsLayout.onRendered(() => {
     if (loginInput && loginInput.name && (loginInput.name.toLowerCase().includes('user') || loginInput.name.toLowerCase().includes('email'))) {
       loginInput.setAttribute('autocomplete', 'username email');
     }
+
+    // Add autocomplete attributes to password fields for WCAG compliance
+    const passwordInputs = document.querySelectorAll('input[type="password"]');
+    passwordInputs.forEach(input => {
+      if (input.name && input.name.includes('password')) {
+        if (input.name.includes('password_again') || input.name.includes('new_password')) {
+          input.setAttribute('autocomplete', 'new-password');
+        } else {
+          input.setAttribute('autocomplete', 'current-password');
+        }
+      }
+    });
   });
 });