fix(components): added TextClamp to title and width in TotalLayoutHeader

Ticket: issue/MainLibrary-193 Reviewed-by: @MIGUELez11 Refs: #157
leemonade · May 24, 2024 · 51abcb2 · 51abcb2
1 parent ad5e7af
commit 51abcb2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
@@ -11,6 +11,7 @@ import {
 } from './TotalLayoutHeader.constants';
 import { TotalLayoutHeaderStyles } from './TotalLayoutHeader.styles';
 import CrossIcon from './crossIcon';
+import { TextClamp } from '../../../typography/TextClamp';
 
 const TotalLayoutHeader = ({
   title,
@@ -56,9 +57,11 @@ const TotalLayoutHeader = ({
               direction={compact ? 'row' : 'column'}
             >
               {getTitle()}
-              <Text as="h3" className={classes.headerSubtitle} color="primary">
-                {formValues.title || formTitlePlaceholder}
-              </Text>
+              <TextClamp lines={1}>
+                <Text as="h3" className={classes.headerSubtitle} color="primary">
+                  {formValues.title || formTitlePlaceholder}
+                </Text>
+              </TextClamp>
             </Stack>
           </Stack>
         </Stack>

diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js
@@ -28,6 +28,7 @@ const TotalLayoutHeaderStyles = createStyles(
       fontSize: '18px',
       fontWeight: 400,
       lineHeight: '24px',
+      width: compact ? '40vw' : '45vw',
       // marginLeft: !compact && '40px',
     },
   }),