fix: unit reason span 2 columns

Chia-Network · Mar 8, 2022 · 2f63e73 · 2f63e73
1 parent 3812b28
commit 2f63e73
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/src/components/forms/UnitDetailsForm.js b/src/components/forms/UnitDetailsForm.js
@@ -439,24 +439,24 @@ const UnitDetailsForm = ({ unitDetails, setUnitDetails }) => {
               </Body>
             )}
           </StyledFieldContainer>
-          <StyledFieldContainer>
-            <StyledLabelContainer>
-              <Body color={'#262626'}>
-                <LabelContainer>
-                  {['cancelled', 'retired'].includes(
-                    unitDetails?.unitStatus?.toLowerCase(),
-                  ) && '*'}
-                  <FormattedMessage id="unit-status-reason" />
-                </LabelContainer>
-                <ToolTipContainer
-                  tooltip={intl.formatMessage({
-                    id: 'units-unit-status-reason-description',
-                  })}>
-                  <DescriptionIcon height="14" width="14" />
-                </ToolTipContainer>
-              </Body>
-            </StyledLabelContainer>
-            <InputContainer>
+          <SpanTwoColumnsContainer>
+            <StyledFieldContainer>
+              <StyledLabelContainer>
+                <Body color={'#262626'}>
+                  <LabelContainer>
+                    {['cancelled', 'retired'].includes(
+                      unitDetails?.unitStatus?.toLowerCase(),
+                    ) && '*'}
+                    <FormattedMessage id="unit-status-reason" />
+                  </LabelContainer>
+                  <ToolTipContainer
+                    tooltip={intl.formatMessage({
+                      id: 'units-unit-status-reason-description',
+                    })}>
+                    <DescriptionIcon height="14" width="14" />
+                  </ToolTipContainer>
+                </Body>
+              </StyledLabelContainer>
               <StandardInput
                 variant={
                   errorMessage?.unitStatusReason
@@ -476,13 +476,13 @@ const UnitDetailsForm = ({ unitDetails, setUnitDetails }) => {
                   }))
                 }
               />
-            </InputContainer>
-            {errorMessage?.unitStatusReason && (
-              <Body size="Small" color="red">
-                {errorMessage.unitStatusReason}
-              </Body>
-            )}
-          </StyledFieldContainer>
+              {errorMessage?.unitStatusReason && (
+                <Body size="Small" color="red">
+                  {errorMessage.unitStatusReason}
+                </Body>
+              )}
+            </StyledFieldContainer>
+          </SpanTwoColumnsContainer>
           <SpanTwoColumnsContainer>
             <StyledFieldContainer>
               <StyledLabelContainer>

diff --git a/src/components/layout/FormContainers.js b/src/components/layout/FormContainers.js
@@ -35,7 +35,7 @@ export const HrSpanTwoColumnsContainer = styled('div')`
 `;
 
 export const RequiredContainer = styled('div')`
-  width: 43%;
+  width: 42.5rem;
 `;
 
 export const StyledLabelContainer = styled('div')`