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;
}
}
}