From 5a08c998e9393f7f870ed99ff5e9f4a4d13a824d Mon Sep 17 00:00:00 2001
From: davidenwang <dwang@sentry.io>
Date: Tue, 16 Apr 2024 16:01:25 -0700
Subject: [PATCH] ref(crons): Remove inline grid column values for styled
 component

---
 .../monitors/components/monitorCreateForm.tsx | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/static/app/views/monitors/components/monitorCreateForm.tsx b/static/app/views/monitors/components/monitorCreateForm.tsx
index 1cff873342dec7..7cda927e14fd2e 100644
--- a/static/app/views/monitors/components/monitorCreateForm.tsx
+++ b/static/app/views/monitors/components/monitorCreateForm.tsx
@@ -100,7 +100,7 @@ export default function MonitorCreateForm() {
       submitLabel={t('Create')}
     >
       <FieldContainer>
-        <MultiColumnInput columns="230px 230px 1fr">
+        <ProjectOwnerNameInputs>
           <StyledSentryProjectSelectorField
             name="project"
             projects={filteredProjects}
@@ -125,7 +125,7 @@ export default function MonitorCreateForm() {
             stacked
             inline={false}
           />
-        </MultiColumnInput>
+        </ProjectOwnerNameInputs>
         <LabelText>{t('SCHEDULE')}</LabelText>
         <ScheduleOptions>
           <Observer>
@@ -146,7 +146,7 @@ export default function MonitorCreateForm() {
                   >
                     <PanelBody withPadding>
                       <ScheduleLabel>{t('Crontab Schedule')}</ScheduleLabel>
-                      <MultiColumnInput columns="1fr 1fr">
+                      <CrontabInputs>
                         <StyledTextField
                           name="config.schedule"
                           placeholder="* * * * *"
@@ -168,7 +168,7 @@ export default function MonitorCreateForm() {
                         <CronstrueText>
                           {parsedSchedule ?? t('(invalid schedule)')}
                         </CronstrueText>
-                      </MultiColumnInput>
+                      </CrontabInputs>
                     </PanelBody>
                   </SchedulePanel>
                   <SchedulePanel
@@ -177,7 +177,7 @@ export default function MonitorCreateForm() {
                   >
                     <PanelBody withPadding>
                       <ScheduleLabel>{t('Interval Schedule')}</ScheduleLabel>
-                      <MultiColumnInput columns="auto 1fr 2fr">
+                      <IntervalInputs>
                         <Label>{t('Every')}</Label>
                         <StyledNumberField
                           name="config.schedule.frequency"
@@ -200,7 +200,7 @@ export default function MonitorCreateForm() {
                           stacked
                           inline={false}
                         />
-                      </MultiColumnInput>
+                      </IntervalInputs>
                     </PanelBody>
                   </SchedulePanel>
                 </Fragment>
@@ -273,11 +273,22 @@ const ScheduleOptions = styled('div')`
   grid-template-columns: 1fr 1fr;
 `;
 
-const MultiColumnInput = styled('div')<{columns?: string}>`
+const MultiColumnInput = styled('div')`
   display: grid;
   align-items: center;
   gap: ${space(1)};
-  grid-template-columns: ${p => p.columns};
+`;
+
+const ProjectOwnerNameInputs = styled(MultiColumnInput)`
+  grid-template-columns: 230px 230px 1fr;
+`;
+
+const CrontabInputs = styled(MultiColumnInput)`
+  grid-template-columns: 1fr 1fr;
+`;
+
+const IntervalInputs = styled(MultiColumnInput)`
+  grid-template-columns: auto 1fr 2fr;
 `;
 
 const CronstrueText = styled(LabelText)`