From 0f43723250c275a7586f644100dc1f3b583d0886 Mon Sep 17 00:00:00 2001
From: Rectos VX <rectos28@hotmail.com>
Date: Wed, 8 May 2024 17:42:36 +0400
Subject: [PATCH] Update: fix dropdown text wrap

---
 src/main/resources/static/css/navbar.css      | 28 ++++++++++++++-----
 .../resources/templates/fragments/navbar.html |  4 +--
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index b29a36da..fcab4a4d 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/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 {
@@ -168,7 +173,7 @@ color: var(--md-sys-color-on-surface-variant);
 
 .scrollable-y::-webkit-scrollbar {
   background: transparent;
-  width: 0.7rem; 
+  width: 0.7rem;
 }
 
 .scrollable-y::-webkit-scrollbar-track {
@@ -176,7 +181,7 @@ color: var(--md-sys-color-on-surface-variant);
 }
 
 .scrollable-y::-webkit-scrollbar-thumb {
-  border-radius: 2rem;  
+  border-radius: 2rem;
   background-color: var(--md-sys-color-surface-5);
   border: 3px solid var(--md-sys-color-surface-5);
 }
@@ -262,4 +267,13 @@ color: var(--md-sys-color-on-surface-variant);
 .dropdown-item.active.advance {
   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;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 88e740e6..5d343a28 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/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>