fix(ui): prevent overflows for node labels

OctoConsulting · Jul 9, 2024 · 3023de1 · 3023de1
1 parent 76b4764
commit 3023de1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/ui/src/components/canvas/EipNode.tsx b/ui/src/components/canvas/EipNode.tsx
@@ -129,7 +129,7 @@ export const EipNode = (props: NodeProps<EipNodeData>) => {
     >
       <div>{getNamespacedTitle(data.eipId)}</div>
       <img className="eip-node-image" src={getIconUrl(data.eipId)} />
-      <div style={hasChildren ? { paddingBottom: "0.5rem" } : {}}>
+      <div className="eip-node-label" style={hasChildren ? { marginBottom: "0.5rem" } : {}}>
         <strong>{data.label}</strong>
       </div>
       {hasChildren && (

diff --git a/ui/src/components/canvas/nodes.scss b/ui/src/components/canvas/nodes.scss
@@ -15,7 +15,7 @@ $icon-button-focus-shadow:
   min-inline-size: 2rem;
   min-block-size: 2rem;
   max-width: 8rem;
-  max-height: 8rem;
+  max-height: 12rem;
   font-size: 0.5rem;
 
   &:hover {
@@ -51,6 +51,12 @@ $icon-button-focus-shadow:
   padding: layout.$spacing-02;
 }
 
+.eip-node-label {
+  overflow-wrap: break-word;
+  max-height: 3rem;
+  overflow-y: hidden;
+}
+
 .eip-endpoint-node .eip-node-image {
   max-width: 6rem;
   max-height: 5rem;