Merge pull request #427 from DLR-SC/fix/filter-name

Fix filter action display on long filter names

Author: JonasGilg

docs/changelog/changelog-de.md

@@ -38,6 +38,8 @@ SPDX-License-Identifier: CC-BY-4.0
 - Ein Fehler wurde behoben, wo Daten angezeigt wurden, obwohl kein Szenario aufgedeckt war.
 - Die Gruppenfilter funktionieren wieder.
 - Die Menüpunkte Impressum, Datenschutzerklärung, Barrierefreiheit, Attribution und Versionshistorie sind wieder erreichbar ohne die Seite zum Absturz zu bringen.
+- Ein Anzeigeproblem bei langen Filternamen wurde behoben, bei dem die Aktionsschaltflächen bei sehr langen Filternamen nicht zugänglich waren.
+
 ---
 
 ## v0.3.1-beta

docs/changelog/changelog-en.md

@@ -38,6 +38,7 @@ SPDX-License-Identifier: CC-BY-4.0
 - A bug was fixed where data was shown while no scenario was active.
 - The group filters are working again.
 - The menu items Imprint, Privacy Policy, Accessibility, Attribution, and Changelog are available again without crashing the page.
+- Fixed a long filter name display issues where the action button is not accessible when using long filter names.
 
 ---
 

src/components/ScenarioComponents/FilterComponents/GroupFilterCard.tsx

@@ -80,18 +80,33 @@ export default function GroupFilterCard({
         onClick={() => {
           selectFilterCallback(selected ? null : item);
         }}
+        sx={{
+          flex: 1,
+          minWidth: 0,
+        }}
       >
-        <CardContent sx={{backgroundColor: selected ? theme.palette.info.main : theme.palette.background.paper}}>
+        <CardContent
+          sx={{
+            backgroundColor: selected ? theme.palette.info.main : theme.palette.background.paper,
+          }}
+        >
           <Typography
             variant='body1'
-            sx={{color: selected ? theme.palette.primary.contrastText : theme.palette.text.primary}}
+            sx={{
+              color: selected ? theme.palette.primary.contrastText : theme.palette.text.primary,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              maxWidth: '100%',
+            }}
+            title={item.name} // Show full name on hover
           >
             {item.name}
           </Typography>
         </CardContent>
       </CardActionArea>
       <Divider orientation='vertical' variant='middle' flexItem />
-      <CardActions>
+      <CardActions sx={{flexShrink: 0}}>
         <Checkbox
           checkedIcon={<Visibility />}
           icon={<VisibilityOffOutlined color='disabled' />}

src/components/ScenarioComponents/FilterComponents/ManageGroupDialog.tsx

@@ -228,6 +228,7 @@ export default function ManageGroupDialog({
               flexDirection: 'column',
               justifyContent: 'center',
               alignItems: 'center',
+              padding: 4,
             }}
           >
             <Typography variant='body1'>