fix: Spacing in alert modal (#22709)

apache · Jan 13, 2023 · 2ccdb72 · 2ccdb72
1 parent 2de19f1
commit 2ccdb72
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
@@ -171,6 +171,10 @@ const StyledSectionContainer = styled.div`
   display: flex;
   flex-direction: column;
 
+  .control-label {
+    margin-top: ${({ theme }) => theme.gridUnit}px;
+  }
+
   .header-section {
     display: flex;
     flex: 0 0 auto;
@@ -339,6 +343,7 @@ const StyledRadioGroup = styled(Radio.Group)`
 
 const StyledCheckbox = styled(AntdCheckbox)`
   margin-left: ${({ theme }) => theme.gridUnit * 5.5}px;
+  margin-top: ${({ theme }) => theme.gridUnit}px;
 `;
 
 // Notification Method components
@@ -356,6 +361,12 @@ const StyledNotificationAddButton = styled.div`
   }
 `;
 
+const StyledNotificationMethodWrapper = styled.div`
+  .inline-container .input-container {
+    margin-left: 0;
+  }
+`;
+
 const timezoneHeaderStyle = (theme: SupersetTheme) => css`
   margin: ${theme.gridUnit * 3}px 0;
 `;
@@ -1445,18 +1456,15 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               <span className="required">*</span>
             </StyledSectionTitle>
             {notificationSettings.map((notificationSetting, i) => (
-              <NotificationMethod
-                setting={notificationSetting}
-                index={i}
-                key={`NotificationMethod-${i}`}
-                onUpdate={updateNotificationSetting}
-                onRemove={removeNotificationSetting}
-                css={css`
-                  .input-container {
-                    margin-left: 0;
-                  }
-                `}
-              />
+              <StyledNotificationMethodWrapper>
+                <NotificationMethod
+                  setting={notificationSetting}
+                  index={i}
+                  key={`NotificationMethod-${i}`}
+                  onUpdate={updateNotificationSetting}
+                  onRemove={removeNotificationSetting}
+                />
+              </StyledNotificationMethodWrapper>
             ))}
             <NotificationMethodAdd
               data-test="notification-add"