From 7fa302f322045fd3f6bc6c45ff1f61645740780c Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Thu, 10 Apr 2025 21:39:42 +0100
Subject: [PATCH] Removed empty spaces shown when language suppression used
 (#3327)

# Description of Changes

Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #3319

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

#### Old

![image](https://github.com/user-attachments/assets/f038b13e-0f6b-4c11-b778-2f1adb6ace57)


#### New

![{6BA642CB-6E74-4B7E-B87E-3F100759042B}](https://github.com/user-attachments/assets/29e2c507-54b3-4ab0-9792-46e013691f4c)


![{EF015A80-C4FE-4731-BDDE-36D74A66E471}](https://github.com/user-attachments/assets/82b11260-9744-40c2-b340-3eb17f4d779e)


### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
---
 build.gradle                                  |  2 +-
 src/main/resources/static/css/navbar.css      | 38 ++++++++++++++++---
 .../templates/fragments/languageEntry.html    |  4 +-
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/build.gradle b/build.gradle
index 014c10b7..db9ef850 100644
--- a/build.gradle
+++ b/build.gradle
@@ -29,7 +29,7 @@ ext {
 }
 
 group = "stirling.software"
-version = "0.45.3"
+version = "0.45.4"
 
 java {
     // 17 is lowest but we support and recommend 21
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index e1d2ad49..f9b3f307 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -89,6 +89,22 @@
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */
 }
 
+.scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child {
+  border: 0px !important
+}
+
+.scalable-languages-container:has(> *:nth-child(1)) {
+  --count: 1;
+}
+
+.scalable-languages-container:has(> *:nth-child(2)) {
+  --count: 2;
+}
+
+.scalable-languages-container:has(> *:nth-child(3)) {
+  --count: 3;
+}
+
 html[dir="ltr"] .lang-dropdown-item-wrapper {
   border-right: 2px solid var(--md-nav-color-on-seperator);
 }
@@ -99,8 +115,8 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
 
 /* Responsive adjustments */
 @media (min-width: 1200px){
-  .lang_dropdown-mw{
-    min-width: 800px
+  .lang-dropdown-item-wrapper .dropdown-item {
+    min-width: 200px
   }
 }
 
@@ -108,7 +124,9 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
   .scalable-languages-container {
     grid-template-columns: repeat(2, 1fr);
   }
-
+  .scalable-languages-container:not(:has(> :nth-child(2))){
+    grid-template-columns: repeat(var(--count), 1fr) !important;
+  }
   .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) {
     border: 0px
   }
@@ -118,15 +136,23 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
   .scalable-languages-container {
     grid-template-columns: repeat(3, 1fr);
   }
+  .scalable-languages-container:not(:has(> :nth-child(3))){
+    grid-template-columns: repeat(var(--count), 1fr) !important;
+  }
   .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) {
     border: 0px
+  }
 }
-}
+
 @media (min-width: 901px) {
   .scalable-languages-container {
     grid-template-columns: repeat(4, 1fr);
   }
 
+  .scalable-languages-container:not(:has(> :nth-child(4))){
+    grid-template-columns: repeat(var(--count), 1fr) !important;
+  }
+
   .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(4n) {
       border: 0px
   }
@@ -215,13 +241,13 @@ span.icon-text::after {
 
 .dropdown-menu.scrollable-y {
   overflow-y: scroll;
-  height: 360px;
+  max-height: 360px;
 }
 
 /* Dropdown Scrollbar*/
 .scrollable-y {
   overflow-y: scroll;
-  height: 190px;
+  max-height: 190px;
   overscroll-behavior: contain;
 }
 
diff --git a/src/main/resources/templates/fragments/languageEntry.html b/src/main/resources/templates/fragments/languageEntry.html
index 410b6a6c..18a976ba 100644
--- a/src/main/resources/templates/fragments/languageEntry.html
+++ b/src/main/resources/templates/fragments/languageEntry.html
@@ -1,6 +1,6 @@
 <th:block th:fragment="languageEntry(code, name)">
-  <div class="lang-dropdown-item-wrapper">
-      <a th:if="${code} == 'en_GB' or ${#lists.isEmpty(@languages) or #lists.contains(@languages, code)}"
+  <div th:if="${code} == 'en_GB' or ${#lists.isEmpty(@languages) or #lists.contains(@languages, code)}" class="lang-dropdown-item-wrapper">
+      <a 
         class="dropdown-item lang_dropdown-item" href="" th:data-bs-language-code="@{${code}}" th:text="${name}">
       </a>
   </div>