fix: proposal creation layout on safari (#7203)

* fix: proposal creation layout on safari

* add important to header margin

src/pages/CreateProposal/ProposalActionDetail.tsx

@@ -2,7 +2,6 @@ import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import AddressInputPanel from 'components/AddressInputPanel'
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
-import React from 'react'
 import styled from 'styled-components'
 
 import { ProposalAction } from './ProposalActionSelector'
@@ -13,10 +12,16 @@ enum ProposalActionDetailField {
 }
 
 const ProposalActionDetailContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
   margin-top: 10px;
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  grid-gap: 10px;
+  > * {
+    width: 100%;
+  }
+  > :not(:last-child) {
+    margin-bottom: 10px;
+  }
 `
 
 export const ProposalActionDetail = ({
@@ -74,8 +79,8 @@ export const ProposalActionDetail = ({
             showMaxButton={false}
             showCommonBases={false}
             showCurrencyAmount={false}
-            disableNonToken={true}
-            hideBalance={true}
+            disableNonToken
+            hideBalance
             id="currency-input"
           />
         ) : null

src/pages/CreateProposal/ProposalActionSelector.tsx

@@ -26,9 +26,10 @@ const ContentWrapper = styled(Column)`
   position: relative;
 `
 const ActionSelectorHeader = styled.div`
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 14px;
   font-weight: 500;
-  color: ${({ theme }) => theme.textSecondary};
+  margin-bottom: 10px;
 `
 
 const ActionDropdown = styled(ButtonDropdown)`
@@ -56,11 +57,11 @@ const ProposalActionSelectorFlex = styled.div`
 `
 
 const ProposalActionSelectorContainer = styled.div`
+  display: flex;
   flex: 1;
-  padding: 1rem;
-  display: grid;
-  grid-auto-rows: auto;
-  grid-row-gap: 10px;
+  justify-content: flex-start;
+  flex-direction: column;
+  padding: 1em;
 `
 
 export const ProposalActionSelector = ({

src/pages/CreateProposal/index.tsx

@@ -59,6 +59,10 @@ const Nav = styled(Link)`
   text-decoration: none;
 `
 
+const HeaderText = styled(ThemedText.SubHeaderLarge)`
+  margin: auto !important;
+`
+
 const CreateProposalButton = ({
   proposalThreshold,
   hasActiveOrPendingProposal,
@@ -258,7 +262,7 @@ ${bodyValue}
         <AppBody $maxWidth="800px">
           <Nav to="/vote">
             <BackArrow />
-            <ThemedText.SubHeaderLarge>Create Proposal</ThemedText.SubHeaderLarge>
+            <HeaderText>Create Proposal</HeaderText>
           </Nav>
           <CreateProposalWrapper>
             <BlueCard>