css ellipsis for text overflow (#11850)

* css ellipsis for text overflow * use min-width: 0
Altinn · Dec 12, 2023 · f343b22 · f343b22
1 parent 5bc0e1c
commit f343b22
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/frontend/packages/shared/src/components/TreeView/TreeViewItem/TreeViewItem.module.css b/frontend/packages/shared/src/components/TreeView/TreeViewItem/TreeViewItem.module.css
@@ -40,3 +40,9 @@
   margin-left: var(--vertical-line-left-spacing);
   box-shadow: var(--vertical-line-colour) var(--vertical-line-width) 0 inset;
 }
+
+.label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/frontend/packages/shared/src/components/TreeView/TreeViewItem/TreeViewItem.tsx b/frontend/packages/shared/src/components/TreeView/TreeViewItem/TreeViewItem.tsx
@@ -123,7 +123,7 @@ export const TreeViewItem = ({
       type='button'
       variant='tertiary'
     >
-      {label}
+      <div className={classes.label}>{label}</div>
     </Button>
   );
 

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.module.css b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.module.css
@@ -25,7 +25,6 @@
 }
 
 .wrapper {
-  display: flex;
   align-items: flex-start;
   justify-content: space-between;
   overflow-wrap: anywhere;

diff --git a/...editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.module.css b/...editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.module.css
@@ -4,6 +4,7 @@
 
 .label {
   flex: 1;
+  min-width: 0;
 }
 
 .root:hover .label {