Update: fix dropdown text wrap

src/main/resources/static/css/navbar.css

@@ -102,7 +102,7 @@
   border-radius: 1rem;
 }
 
-.icon + .icon {
+.icon+.icon {
   margin-left: -4px;
 }
 
@@ -111,9 +111,14 @@
   margin-right: 4px;
   display: inline-flex;
   flex-direction: column;
-  align-items: center;
   justify-content: space-between;
-  text-decoration: none;
+  vertical-align: middle;
+}
+
+.dropdown-item .icon-text {
+  text-wrap: wrap;
+  word-break: break-word;
+  width: 80%;
 }
 
 span.icon-text::after {
@@ -151,8 +156,8 @@ span.icon-text::after {
   transform: translateY(-2px);
 }
 
-.navbar-toggler{
-color: var(--md-sys-color-on-surface-variant);
+.navbar-toggler {
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 .dropdown-menu.scrollable-y {
@@ -263,3 +268,12 @@ color: var(--md-sys-color-on-surface-variant);
   color: var(--md-nav-on-section-color-advance);
   background-color: var(--md-nav-section-color-advance);
 }
+
+/* Dropdown min-width */
+.dropdown-mw-28 {
+  min-width: 280px;
+}
+
+.dropdown-mw-20 {
+  min-width: 200px;
+}

src/main/resources/templates/fragments/navbar.html

@@ -293,7 +293,7 @@
                 star
               </span>
             </a>
-            <div class="dropdown-menu  px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
+            <div class="dropdown-menu dropdown-mw-28 px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
               <!-- Dropdown items will be added here by JavaScript -->
             </div>
           </li>
@@ -312,7 +312,7 @@
               </span>
             </a>
             <div class="dropdown-menu px-xl-2 px-2" aria-labelledby="languageDropdown">
-              <div class="scrollable-y">
+              <div class="scrollable-y dropdown-mw-20">
                 <th:block th:insert="~{fragments/languages :: langs}"></th:block>
               </div>
             </div>