style: Add ellipsis for names which take more than 2 lines

cozy · Nov 2, 2021 · bcd521c · bcd521c
1 parent 3a4a6c3
commit bcd521c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/react/SquareAppIcon/Readme.md b/react/SquareAppIcon/Readme.md
@@ -27,7 +27,7 @@ const theme = useCozyTheme()
     <SquareAppIcon name="Add" variant="add" />
   </Grid>
   <Grid item>
-    <SquareAppIcon app="testapp" name="No Account long name" variant="ghost" />
+    <SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
   </Grid>
   <Grid item>
     <SquareAppIcon name="Shortcut" variant="shortcut" />

diff --git a/react/SquareAppIcon/index.jsx b/react/SquareAppIcon/index.jsx
@@ -26,6 +26,9 @@ const useStyles = makeStyles(theme => ({
     lineHeight: '1.188rem',
     margin: '0.5rem 0.25rem 0 0.25rem',
     textShadow: theme.textShadows[1],
+    lineClamp: '2',
+    boxOrient: 'vertical',
+    display: '-webkit-box',
     height: '2.375rem',
     [theme.breakpoints.down('sm')]: {
       width: '3.75rem',