From 35ac74b0490721a77458d1145b2ad28e7b4e64c9 Mon Sep 17 00:00:00 2001
From: Ludy <Ludy87@users.noreply.github.com>
Date: Tue, 11 Aug 2026 16:18:02 +0200
Subject: [PATCH] fix(ui): improve mobile language selector positioning (#7158)

# Description of Changes

- Made the language selector dropdown responsive on mobile devices.
- Limited the dropdown width to the available viewport width.
- Changed the language grid to use two columns on small screens.
- Added a scrollable maximum height to prevent the dropdown from
overflowing the settings dialog.
- Updated only:
  - `frontend/editor/src/core/components/shared/LanguageSelector.tsx`
-
`frontend/editor/src/core/components/shared/LanguageSelector.module.css`

The change improves usability on narrow mobile screens, where the
previous fixed-width four-column layout caused the language selector to
overflow horizontally.

before:
<img width="1920" height="1032" alt="image"
src="https://github.com/user-attachments/assets/85eeca25-4aad-4280-8a11-18db4899deec"
/>

after:
<img width="1920" height="1080" alt="image"
src="https://github.com/user-attachments/assets/8b3ccc12-fc1f-4949-88b6-4ca65354a3f9"
/>


---

## 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/devGuide/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/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### 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 run `task check` to verify linters, typechecks, and tests
pass
- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing)
for more details.
---
 .../components/shared/LanguageSelector.module.css    |  2 +-
 .../src/core/components/shared/LanguageSelector.tsx  | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/editor/src/core/components/shared/LanguageSelector.module.css b/frontend/editor/src/core/components/shared/LanguageSelector.module.css
index 68c1d672bf..f04f5bf8b1 100644
--- a/frontend/editor/src/core/components/shared/LanguageSelector.module.css
+++ b/frontend/editor/src/core/components/shared/LanguageSelector.module.css
@@ -1,7 +1,7 @@
 /* Language selector grid responsive layout */
 .languageGrid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(var(--language-grid-columns, 4), 1fr);
   gap: 0;
 }
 
diff --git a/frontend/editor/src/core/components/shared/LanguageSelector.tsx b/frontend/editor/src/core/components/shared/LanguageSelector.tsx
index 257f7cd0f5..1adb0fc0bb 100644
--- a/frontend/editor/src/core/components/shared/LanguageSelector.tsx
+++ b/frontend/editor/src/core/components/shared/LanguageSelector.tsx
@@ -183,6 +183,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
   // 2-4: 300px/2 cols, 5-9: 400px/3 cols, 10+: 600px/4 cols
   const dropdownWidth =
     languageOptions.length <= 4 ? 300 : languageOptions.length <= 9 ? 400 : 600;
+  const responsiveDropdownWidth = `min(${dropdownWidth}px, calc(100vw - 24px))`;
 
   const gridColumns =
     languageOptions.length <= 4 ? 2 : languageOptions.length <= 9 ? 3 : 4;
@@ -236,7 +237,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
       <Menu
         opened={opened}
         onChange={setOpened}
-        width={dropdownWidth}
+        width={responsiveDropdownWidth}
         position={position}
         offset={offset}
         zIndex={Z_INDEX_CONFIG_MODAL}
@@ -276,6 +277,9 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         <Menu.Dropdown
           style={{
             padding: "12px",
+            maxHeight: "min(360px, calc(100vh - 160px))",
+            overflowY: "auto",
+            maxWidth: "calc(100vw - 24px)",
             borderRadius: "8px",
             boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
             backgroundColor:
@@ -286,7 +290,11 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         >
           <div
             className={styles.languageGrid}
-            style={{ gridTemplateColumns: `repeat(${gridColumns}, 1fr)` }}
+            style={
+              {
+                "--language-grid-columns": gridColumns,
+              } as React.CSSProperties
+            }
           >
             {languageOptions.map((option, index) => (
               <LanguageItem