Fix/UI bugs (#439)

* fix spacing issue with header links * fix spacing on executive card * move polls to single column at bpi 2 * dont wrap footer links columns at larger bpi
makerdao · Apr 28, 2022 · 3484633 · 3484633
1 parent 6b79a24
commit 3484633
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/modules/app/components/layout/Header.tsx b/modules/app/components/layout/Header.tsx
@@ -245,7 +245,7 @@ const Header = (): JSX.Element => {
             title="View delegates page"
             p={0}
             sx={{
-              display: ['none', 'block'],
+              display: ['none', 'flex'],
               ml: [0, 4, 4, 5],
               color: router?.asPath?.startsWith('/delegates') ? 'primary' : undefined
             }}
@@ -258,7 +258,8 @@ const Header = (): JSX.Element => {
             title="View emergency shutdown module page"
             p={0}
             sx={{
-              display: ['none', 'block'],
+              flexShrink: 0,
+              display: ['none', 'flex'],
               ml: [0, 4, 4, 5],
               mr: [0, 'auto', 4, 5],
               color: router?.asPath?.startsWith('/esmodule') ? 'primary' : undefined

diff --git a/modules/executive/components/ExecutiveOverviewCard.tsx b/modules/executive/components/ExecutiveOverviewCard.tsx
@@ -118,9 +118,20 @@ export default function ExecutiveOverviewCard({
             )}
           </Box>
           <Flex
-            sx={{ alignItems: ['flex-end', 'center'], justifyContent: 'space-between', height: ['auto', 74] }}
+            sx={{
+              alignItems: ['flex-end', 'center'],
+              justifyContent: 'space-between',
+              height: ['auto', 'auto', 'auto', 74]
+            }}
           >
-            <Flex sx={{ flexDirection: ['column-reverse', 'row'], width: '50%' }}>
+            <Flex
+              sx={{
+                flexDirection: ['column-reverse', 'row'],
+                flexWrap: 'wrap-reverse',
+                width: ['auto', 'auto', 'auto', 'auto', '55%'],
+                gap: [0, 3]
+              }}
+            >
               <InternalLink href={`/executive/${proposal.key}`} title="View executive details">
                 <Button
                   variant="outline"
@@ -135,7 +146,7 @@ export default function ExecutiveOverviewCard({
               {!hasVotedFor && canVote && (
                 <Button
                   variant="primaryOutline"
-                  sx={{ ml: [0, 3], width: 122 }}
+                  sx={{ width: 122 }}
                   disabled={hasVotedFor && votedProposals && votedProposals.length === 1}
                   onClick={ev => {
                     trackButtonClick('openExecVoteModal');
@@ -167,7 +178,7 @@ export default function ExecutiveOverviewCard({
                 </Badge>
               )}
             </Flex>
-            <Flex>
+            <Flex sx={{ flexShrink: 0 }}>
               {spellData?.mkrSupport === undefined ? (
                 <Box sx={{ width: 6, ml: 'auto', height: '100%' }}>
                   <Skeleton />

diff --git a/modules/home/components/Footer.tsx b/modules/home/components/Footer.tsx
@@ -195,7 +195,7 @@ export default function Footer({ locale = 'en' }: { locale?: string }): React.Re
             justifyContent: 'space-between',
             gap: [4, 2, 5],
             width: ['100%', '100%', 'initial'],
-            flexWrap: 'wrap'
+            flexWrap: ['wrap', 'nowrap']
           }}
         >
           {links.map(group => {

diff --git a/modules/home/components/PollsOverviewLanding.tsx b/modules/home/components/PollsOverviewLanding.tsx
@@ -24,7 +24,7 @@ export const PollsOverviewLanding = ({ activePolls, allPolls }: Props): JSX.Elem
       </Flex>
       <Flex>
         <ErrorBoundary componentName="Active Polls">
-          <Grid gap={4} columns={[1, 1, 2]}>
+          <Grid gap={4} columns={[1, 1, 1, 2]}>
             {pollsToDisplay.map(poll => (
               <PollOverviewCard key={poll.pollId} poll={poll} reviewPage={false} showVoting={false} />
             ))}