2299 feature request language selection overhaul (#3017)

# Description of Changes

Please provide a summary of the changes, including:

- UI design of language drop down has changed
- too few languages were visible on the drop down
- Flags caused controversy 
- Scaling window due to size required adding some /@media CSS tags in
navbar css

Closes #(2299)

---

## Checklist

### General

- [x ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ x] 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)
- [ x] I have performed a self-review of my own code
- [x ] My changes generate no new warnings

### Documentation

- [x ] 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)

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

### Testing (if applicable)

- [ ] 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>

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

@@ -83,6 +83,55 @@
   vertical-align: middle;
 }
 
+
+.scalable-languages-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */
+}
+
+html[dir="ltr"] .lang-dropdown-item-wrapper {
+  border-right: 2px solid var(--md-nav-color-on-seperator);
+}
+
+html[dir="rtl"] .lang-dropdown-item-wrapper {
+  border-left: 2px solid var(--md-nav-color-on-seperator);
+}
+
+/* Responsive adjustments */
+@media (min-width: 1200px){
+  .lang_dropdown-mw{
+    min-width: 800px
+  }
+}
+
+@media (max-width: 600px) {
+  .scalable-languages-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) {
+    border: 0px
+  }
+}
+
+@media (min-width: 601px) and (max-width: 900px) {
+  .scalable-languages-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .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 .lang-dropdown-item-wrapper:nth-child(4n) {
+      border: 0px
+  }
+}
+
 .dropdown-item .icon-text {
   text-wrap: wrap;
   word-break: break-word;
@@ -173,6 +222,7 @@ span.icon-text::after {
 .scrollable-y {
   overflow-y: scroll;
   height: 190px;
+  overscroll-behavior: contain;
 }
 
 .scrollable-y::-webkit-scrollbar {
@@ -291,20 +341,34 @@ span.icon-text::after {
 }
 
 /* Dropdown open on hover */
-.dropdown-menu {
+html[dir="ltr"] .dropdown-menu {
   padding-top: 0.5rem;
   top: auto;
   left: auto;
   right: 0;
 }
 
-.dropdown-menu[data-bs-popper] {
+html[dir="rtl"] .dropdown-menu {
+  padding-top: 0.5rem;
+  top: auto;
+  left: 0;
+  right: auto;
+}
+
+html[dir="ltr"] .dropdown-menu[data-bs-popper] {
   top: auto;
   left: auto;
   right: 0;
   margin-top: 0 !important;
 }
 
+html[dir="rtl"] .dropdown-menu[data-bs-popper] {
+  top: auto;
+  left: 0;
+  right: auto;
+  margin-top: 0 !important;
+}
+
 .dropdown-menu-wrapper {
   padding: 1.5rem 0;
   border-radius: 1rem;