From de74bccd989b4c44bda3194aa28f9e7a7db4b9fa Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 21 Jul 2026 14:43:03 +0200
Subject: [PATCH] fix: prevent long language names from shrinking dashboard
 progress bars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashboard languages grid sized the name column with `auto`, so a long
language name (e.g. "Arabic (Palestinian Territories) | العربية (الأراضي
الفلسطينية)") expanded to its full single-line width and left the 10fr
progress bar column with almost no space — for every row, since the grid
is shared.

Cap the name column at fit-content(40%) and give the bar column a 120px
floor, so short names keep hugging their content while long names
truncate with an ellipsis (full name shown in a tooltip) instead of
stretching the column. Bars stay equal width across rows and rows keep a
single-line height. Language tags get the same ellipsis treatment so an
overlong custom tag cannot clip the Base chip or bleed under the bar.
---
 .../dashboard/LanguageStats/LanguageStats.tsx | 45 ++++++++++++++-----
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/webapp/src/views/projects/dashboard/LanguageStats/LanguageStats.tsx b/webapp/src/views/projects/dashboard/LanguageStats/LanguageStats.tsx
index b4de6d01d9..bdd6504660 100644
--- a/webapp/src/views/projects/dashboard/LanguageStats/LanguageStats.tsx
+++ b/webapp/src/views/projects/dashboard/LanguageStats/LanguageStats.tsx
@@ -30,7 +30,7 @@ import { TooltipCard } from 'tg.component/common/TooltipCard';
 
 const StyledContainer = styled('div')`
   display: grid;
-  grid-template-columns: auto auto auto 10fr auto auto;
+  grid-template-columns: fit-content(40%) auto auto minmax(120px, 1fr) auto auto;
   margin: ${({ theme }) => theme.spacing(1, 0, 2, 0)};
 `;
 
@@ -51,6 +51,8 @@ const StyledRow = styled('div')`
 `;
 
 const StyledInfo = styled(Box)`
+  min-width: 0;
+  overflow: hidden;
   display: grid;
   grid-template-columns: auto auto 1fr;
   grid-template-areas:
@@ -60,6 +62,24 @@ const StyledInfo = styled(Box)`
   padding-left: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledLanguageName = styled('div')`
+  grid-area: name;
+  justify-self: start;
+  max-width: 100%;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const StyledTag = styled('div')`
+  grid-area: tag;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const StyledTooltip = styled(Tooltip)`
   max-width: 100vw;
 `;
@@ -162,6 +182,12 @@ export const LanguageStats: FC<React.PropsWithChildren<Props>> = ({
           'translations.view',
           language.id
         );
+        const languageDisplayName =
+          item.languageName +
+          (item.languageOriginalName &&
+          item.languageOriginalName !== item.languageName
+            ? ' | ' + item.languageOriginalName
+            : '');
 
         return (
           <React.Fragment key={item.languageId}>
@@ -172,22 +198,18 @@ export const LanguageStats: FC<React.PropsWithChildren<Props>> = ({
               }
             >
               <StyledInfo>
-                <Box gridArea="name">
-                  {item.languageName +
-                    (item.languageOriginalName &&
-                    item.languageOriginalName !== item.languageName
-                      ? ' | ' + item.languageOriginalName
-                      : '')}
-                </Box>
+                <Tooltip title={languageDisplayName} disableInteractive>
+                  <StyledLanguageName>{languageDisplayName}</StyledLanguageName>
+                </Tooltip>
                 <Box gridArea="flag">
                   <CircledLanguageIcon
                     size={20}
                     flag={item.languageFlagEmoji || ''}
                   />
                 </Box>
-                <Box gridArea="tag">{item.languageTag}</Box>
+                <StyledTag>{item.languageTag}</StyledTag>
                 <Box gridArea="base">
-                  {language?.base && (
+                  {language.base && (
                     <Chip size="small" label={t('global_language_base')} />
                   )}
                 </Box>
@@ -198,7 +220,6 @@ export const LanguageStats: FC<React.PropsWithChildren<Props>> = ({
                   componentsProps={{
                     tooltip: { style: { maxWidth: '100vw' } },
                   }}
-                  className="test"
                   title={<LanguageLabels data={item} />}
                 >
                   <Box>
@@ -242,7 +263,7 @@ export const LanguageStats: FC<React.PropsWithChildren<Props>> = ({
                   </Tooltip>
                 )}
               <StyledActions>
-                <LanguageMenu language={language!} />
+                <LanguageMenu language={language} />
               </StyledActions>
             </StyledRow>
             {i + 1 < languageStats.length && <StyledSeparator />}