From 3a4a6c3f1efd5cae13c5f8fdddce268bdd6e7889 Mon Sep 17 00:00:00 2001
From: doubleface <christophe@cozycloud.cc>
Date: Fri, 29 Oct 2021 11:34:16 +0200
Subject: [PATCH 1/2] fix: Use u-spacellipsis instead of u-ellipsis

To keep the expected `white-space: break-spaces` css value and then
keep the name of SquareAppIcon possible in two lines.
---
 react/SquareAppIcon/Readme.md                    |  2 +-
 .../__snapshots__/SquareAppIcon.spec.js.snap     | 16 ++++++++--------
 react/SquareAppIcon/index.jsx                    |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/react/SquareAppIcon/Readme.md b/react/SquareAppIcon/Readme.md
index 7dedfb2baf..47cb31e93b 100644
--- 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" variant="ghost" />
+    <SquareAppIcon app="testapp" name="No Account long name" variant="ghost" />
   </Grid>
   <Grid item>
     <SquareAppIcon name="Shortcut" variant="shortcut" />
diff --git a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
index e97a29c265..b429037dd5 100644
--- a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
+++ b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
@@ -35,7 +35,7 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-7 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -77,7 +77,7 @@ exports[`SquareAppIcon component should render an app correctly with the given n
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-1 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     modified
   </h6>
@@ -119,7 +119,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-13 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     testslug
   </h6>
@@ -168,7 +168,7 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-37 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   />
 </div>
 `;
@@ -220,7 +220,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-31 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -262,7 +262,7 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-25 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -304,7 +304,7 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-19 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -349,7 +349,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
     </span>
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-43 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     shortcut
   </h6>
diff --git a/react/SquareAppIcon/index.jsx b/react/SquareAppIcon/index.jsx
index 0155a0d030..dcf74d1155 100644
--- a/react/SquareAppIcon/index.jsx
+++ b/react/SquareAppIcon/index.jsx
@@ -121,7 +121,7 @@ export const SquareAppIcon = ({ app, name, variant }) => {
         </Badge>
       </InfosBadge>
       <Typography
-        className={cx(classes.name, 'u-ellipsis', 'u-ov-hidden')}
+        className={cx(classes.name, 'u-spacellipsis')}
         variant="h6"
         align="center"
       >

From bcd521cbf748fbff70e38c5cb38fad652f165c2e Mon Sep 17 00:00:00 2001
From: doubleface <christophe@cozycloud.cc>
Date: Tue, 2 Nov 2021 12:10:24 +0100
Subject: [PATCH 2/2] style: Add ellipsis for names which take more than 2
 lines

---
 react/SquareAppIcon/Readme.md | 2 +-
 react/SquareAppIcon/index.jsx | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/react/SquareAppIcon/Readme.md b/react/SquareAppIcon/Readme.md
index 47cb31e93b..570a0e387a 100644
--- 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
index dcf74d1155..4fd69a8d32 100644
--- 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',