diff --git a/src/components/stage-notify-modal/index.js b/src/components/stage-notify-modal/index.js index afd9e07b..595c7c83 100644 --- 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 ? (
{itemsTitle ? ( -
- + <> + {itemsTitle} -
+
+ ) : null} {items.map(({ stageId, levelId, stepId }, i) => ( -
-
- - {displayName(stageId, levelId, stepId)} - -
+ + + {displayName(stageId, levelId, stepId)} + -
+
+ ))}
) : null} diff --git a/src/components/stage-notify-modal/styles.scss b/src/components/stage-notify-modal/styles.scss index 6c1e6f39..e1915442 100644 --- 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; } } }