Merge pull request #215 from newrelic/modal-text-overflow

fix: text overflow in missing signals modal
newrelic · Apr 30, 2024 · eb1a126 · eb1a126
2 parents 57b493e + 03abe75
commit eb1a126
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/src/components/stage-notify-modal/index.js b/src/components/stage-notify-modal/index.js
@@ -1,4 +1,5 @@
 import React, {
+  Fragment,
   forwardRef,
   useCallback,
   useContext,
@@ -115,20 +116,23 @@ const StageNotifyModal = forwardRef(
             {items.length ? (
               <div className="items-table">
                 {itemsTitle ? (
-                  <div className="item-row heading">
-                    <HeadingText type={HeadingText.TYPE.HEADING_6}>
+                  <>
+                    <HeadingText
+                      className="items-table-cell heading"
+                      type={HeadingText.TYPE.HEADING_6}
+                    >
                       {itemsTitle}
                     </HeadingText>
-                  </div>
+                    <div className="items-table-cell rule" />
+                  </>
                 ) : null}
                 {items.map(({ stageId, levelId, stepId }, i) => (
-                  <div className="item-row" key={i}>
-                    <div className="item-name">
-                      <BlockText>
-                        {displayName(stageId, levelId, stepId)}
-                      </BlockText>
-                    </div>
+                  <Fragment key={i}>
+                    <BlockText className="items-table-cell item-name">
+                      {displayName(stageId, levelId, stepId)}
+                    </BlockText>
                     <Button
+                      className="items-table-cell"
                       variant={Button.VARIANT.PRIMARY}
                       sizeType={Button.SIZE_TYPE.SMALL}
                       onClick={() =>
@@ -137,7 +141,8 @@ const StageNotifyModal = forwardRef(
                     >
                       Update signals
                     </Button>
-                  </div>
+                    <div className="items-table-cell rule" />
+                  </Fragment>
                 ))}
               </div>
             ) : null}

diff --git a/src/components/stage-notify-modal/styles.scss b/src/components/stage-notify-modal/styles.scss
@@ -17,25 +17,24 @@
     gap: 16px;
 
     .items-table {
-      display: flex;
-      flex-direction: column;
+      display: grid;
+      grid-template-columns: 1fr min-content;
+      align-items: center;
+      gap: 8px;
 
-      .item-row {
-        display: flex;
-        padding: 8px;
-        align-items: center;
-        gap: 8px;
-        border-bottom: 1px solid #ECEEEE;
-
-        .item-name {
-          flex: 1;
-          min-width: 0;
-
-          div {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
+      .items-table-cell {
+        &.item-name {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+        &.heading {
+          grid-column: span 2;
+        }
+        &.rule {
+          grid-column: span 2;
+          height: 1px;
+          border-bottom: 1px solid #ECEEEE;
         }
       }
     }