From 6d3d9c204fb561a81543e2325163e6b52c7f7a1c Mon Sep 17 00:00:00 2001
From: Rohit <rohit.karma026@gmail.com>
Date: Tue, 12 May 2026 15:03:25 +0530
Subject: [PATCH 1/4] fix: add tooltip and responsive wrapping for long
 language names (#3611)

- Add tooltip on hover for full language name
- Expand dropdown width for better readability
- Use ellipsis on large screens, wrapping on small screens

Fixes #3611
---
 .../form/LanguagesSelect/LanguagesSelect.tsx  |  3 +-
 .../LanguagesSelect/getLanguagesContent.tsx   | 43 ++++++++++++++-----
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx b/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
index 0d4b5c990db..491cf7b8c17 100644
--- a/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
+++ b/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
@@ -52,7 +52,8 @@ export const LanguagesSelect: FunctionComponent<Props> = (props) => {
     variant: 'menu',
     PaperProps: {
       style: {
-        width: 250,
+        minWidth: 200,
+        maxWidth: 350,
       },
     },
     id: `language-select-${props.context}-menu`,
diff --git a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
index 6423f483dcc..a80ee41ab76 100644
--- a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
+++ b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
@@ -1,4 +1,10 @@
-import { Checkbox, ListItemText, MenuItem, Divider } from '@mui/material';
+import {
+  Checkbox,
+  ListItemText,
+  MenuItem,
+  Divider,
+  Tooltip,
+} from '@mui/material';
 import { T, useTranslate } from '@tolgee/react';
 
 import { putBaseLangFirst } from 'tg.fixtures/putBaseLangFirst';
@@ -67,16 +73,31 @@ export const getLanguagesContent = ({
   const isBatchOperation = context === 'batch-operations';
 
   const languageItems = languages.map((lang) => (
-    <MenuItem
-      key={lang.tag}
-      value={lang.tag}
-      data-cy="translations-language-select-item"
-      onClick={handleLanguageChange(lang.tag)}
-      disabled={disabledLanguages?.includes(lang.id)}
-    >
-      <Checkbox checked={value?.includes(lang.tag)} size="small" />
-      <ListItemText primary={lang.name} />
-    </MenuItem>
+    <Tooltip key={lang.tag} title={lang.name} placement="right">
+      <MenuItem
+        value={lang.tag}
+        data-cy="translations-language-select-item"
+        onClick={handleLanguageChange(lang.tag)}
+        disabled={disabledLanguages?.includes(lang.id)}
+      >
+        <Checkbox checked={value?.includes(lang.tag)} size="small" />
+        <ListItemText
+          primary={lang.name}
+          sx={{
+            '& .MuiListItemText-primary': {
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              '@media (max-width: 600px)': {
+                whiteSpace: 'normal',
+                textOverflow: 'unset',
+                overflow: 'visible',
+              },
+            },
+          }}
+        />
+      </MenuItem>
+    </Tooltip>
   ));
 
   if (isBatchOperation) {

From f8770a633f87d6e3ca8fdefefa4d11a15bb8a435 Mon Sep 17 00:00:00 2001
From: Rohit <rohit.karma026@gmail.com>
Date: Tue, 12 May 2026 16:01:21 +0530
Subject: [PATCH 2/4] Address code review feedback

- Use MUI theme breakpoints instead of hardcoded 600px
- Wrap MenuItem in span to fix Tooltip on disabled items
---
 .../form/LanguagesSelect/LanguagesSelect.tsx  |  6 +--
 .../LanguagesSelect/getLanguagesContent.tsx   | 46 ++++++++++---------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx b/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
index 491cf7b8c17..a839eeeaa1a 100644
--- a/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
+++ b/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
@@ -51,10 +51,10 @@ export const LanguagesSelect: FunctionComponent<Props> = (props) => {
   const menuProps: Partial<MenuProps> = {
     variant: 'menu',
     PaperProps: {
-      style: {
+      sx: (theme) => ({
         minWidth: 200,
-        maxWidth: 350,
-      },
+        maxWidth: 300,
+      }),
     },
     id: `language-select-${props.context}-menu`,
     anchorOrigin: {
diff --git a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
index a80ee41ab76..db73589457a 100644
--- a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
+++ b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
@@ -74,29 +74,31 @@ export const getLanguagesContent = ({
 
   const languageItems = languages.map((lang) => (
     <Tooltip key={lang.tag} title={lang.name} placement="right">
-      <MenuItem
-        value={lang.tag}
-        data-cy="translations-language-select-item"
-        onClick={handleLanguageChange(lang.tag)}
-        disabled={disabledLanguages?.includes(lang.id)}
-      >
-        <Checkbox checked={value?.includes(lang.tag)} size="small" />
-        <ListItemText
-          primary={lang.name}
-          sx={{
-            '& .MuiListItemText-primary': {
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              '@media (max-width: 600px)': {
-                whiteSpace: 'normal',
-                textOverflow: 'unset',
-                overflow: 'visible',
+      <span style={{ display: 'inline-block', width: '100%' }}>
+        <MenuItem
+          value={lang.tag}
+          data-cy="translations-language-select-item"
+          onClick={handleLanguageChange(lang.tag)}
+          disabled={disabledLanguages?.includes(lang.id)}
+        >
+          <Checkbox checked={value?.includes(lang.tag)} size="small" />
+          <ListItemText
+            primary={lang.name}
+            sx={(theme) => ({
+              '& .MuiListItemText-primary': {
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                [theme.breakpoints.down('sm')]: {
+                  whiteSpace: 'normal',
+                  textOverflow: 'unset',
+                  overflow: 'visible',
+                },
               },
-            },
-          }}
-        />
-      </MenuItem>
+            })}
+          />
+        </MenuItem>
+      </span>
     </Tooltip>
   ));
 

From c1c127683e743298dbe48260cb96100062565281 Mon Sep 17 00:00:00 2001
From: Rohit <rohit.karma026@gmail.com>
Date: Wed, 10 Jun 2026 11:18:14 +0530
Subject: [PATCH 3/4] Fix tooltip placement and simplify sx usage

---
 .../form/LanguagesSelect/LanguagesSelect.tsx  |  7 +++---
 .../LanguagesSelect/getLanguagesContent.tsx   | 24 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx b/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
index a839eeeaa1a..22a7bacf8c2 100644
--- a/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
+++ b/webapp/src/component/common/form/LanguagesSelect/LanguagesSelect.tsx
@@ -51,10 +51,9 @@ export const LanguagesSelect: FunctionComponent<Props> = (props) => {
   const menuProps: Partial<MenuProps> = {
     variant: 'menu',
     PaperProps: {
-      sx: (theme) => ({
-        minWidth: 200,
-        maxWidth: 300,
-      }),
+      sx: {
+        width:250,
+      }
     },
     id: `language-select-${props.context}-menu`,
     anchorOrigin: {
diff --git a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
index db73589457a..9a3cf5d0cc5 100644
--- a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
+++ b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
@@ -73,15 +73,15 @@ export const getLanguagesContent = ({
   const isBatchOperation = context === 'batch-operations';
 
   const languageItems = languages.map((lang) => (
-    <Tooltip key={lang.tag} title={lang.name} placement="right">
-      <span style={{ display: 'inline-block', width: '100%' }}>
-        <MenuItem
-          value={lang.tag}
-          data-cy="translations-language-select-item"
-          onClick={handleLanguageChange(lang.tag)}
-          disabled={disabledLanguages?.includes(lang.id)}
-        >
-          <Checkbox checked={value?.includes(lang.tag)} size="small" />
+    <span style={{ display: 'inline-block', width: '100%' }}>
+      <MenuItem
+        value={lang.tag}
+        data-cy="translations-language-select-item"
+        onClick={handleLanguageChange(lang.tag)}
+        disabled={disabledLanguages?.includes(lang.id)}
+      >
+        <Checkbox checked={value?.includes(lang.tag)} size="small" />
+        <Tooltip title={lang.name} placement="right" >
           <ListItemText
             primary={lang.name}
             sx={(theme) => ({
@@ -97,9 +97,9 @@ export const getLanguagesContent = ({
               },
             })}
           />
-        </MenuItem>
-      </span>
-    </Tooltip>
+        </Tooltip>
+      </MenuItem>
+    </span>
   ));
 
   if (isBatchOperation) {

From 266e75b56fc2c8ddf1c07ce47eda6ebd24cd26fe Mon Sep 17 00:00:00 2001
From: Rohit <rohit.karma026@gmail.com>
Date: Wed, 10 Jun 2026 11:45:27 +0530
Subject: [PATCH 4/4] Missing key prop on mapped list elements.

---
 .../common/form/LanguagesSelect/getLanguagesContent.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
index 9a3cf5d0cc5..41e07b54daa 100644
--- a/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
+++ b/webapp/src/component/common/form/LanguagesSelect/getLanguagesContent.tsx
@@ -73,7 +73,7 @@ export const getLanguagesContent = ({
   const isBatchOperation = context === 'batch-operations';
 
   const languageItems = languages.map((lang) => (
-    <span style={{ display: 'inline-block', width: '100%' }}>
+    <span key={lang.tag} style={{ display: 'inline-block', width: '100%' }}>
       <MenuItem
         value={lang.tag}
         data-cy="translations-language-select-item"