Table responsive corrections

src/components/specific_challenge/AllEntries/AllEntries.js

@@ -199,7 +199,7 @@ const AllEntries = (props) => {
 
   const desktopRender = () => {
     return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
+      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
         <H2 as="h2" margin="0 0 32px 0">
           All Entries
         </H2>

src/components/specific_challenge/Challenge.js

@@ -115,7 +115,7 @@ const Challenge = (props) => {
           <FlexColumn
             minHeight="100vh"
             alignmentY="flex-start"
-            padding="64px 24px 64px 310px"
+            padding="64px 24px 64px 280px"
             id="start"
           >
             <FlexRow gap="32px" margin="0 0 32px 0" padding="16px">

src/components/specific_challenge/ColumnFilterIcon.js

@@ -9,7 +9,8 @@ const ColumnFilterIcon = (props) => {
     if (props.index === props.active) {
       return (
         <Svg
-          width="8px"
+          minWidth="8px"
+          maxWidth="8px"
           src={filterIco}
           cursor={props.cursor}
           backgroundColor={theme.colors.dark}
@@ -20,7 +21,8 @@ const ColumnFilterIcon = (props) => {
     } else {
       return (
         <Svg
-          width="8px"
+          minWidth="8px"
+          maxWidth="8px"
           src={arrow}
           cursor={props.cursor}
           backgroundColor={theme.colors.dark}
@@ -33,7 +35,8 @@ const ColumnFilterIcon = (props) => {
   return (
     <>
       <Svg
-        width="8px"
+        minWidth="8px"
+        maxWidth="8px"
         rotate="180deg"
         src={arrow}
         cursor={props.cursor}

src/components/specific_challenge/DesktopChallengeMenu.js

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import {
   MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
   MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+  IS_MOBILE,
 } from '../../utils/globals';
 
 const DesktopChallengeMenuStyle = styled(FlexColumn)`
@@ -15,7 +16,7 @@ const DesktopChallengeMenuStyle = styled(FlexColumn)`
   position: fixed;
   left: 0;
   overflow-y: auto;
-  width: 280px;
+  width: 240px;
   height: 100vh;
   top: 50px;
   padding: 64px 0 0 0;
@@ -58,7 +59,12 @@ const DesktopChallengeMenu = (props) => {
               .toLowerCase()
               .replace(' ', '')}`}
           >
-            <H3 textTransform="uppercase">{option}</H3>
+            <H3
+              fontSize={IS_MOBILE() ? '18px' : '22px'}
+              textTransform="uppercase"
+            >
+              {option}
+            </H3>
           </Option>
         );
       })}

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -225,7 +225,7 @@ const Leaderboard = (props) => {
 
   const desktopRender = () => {
     return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1200px">
+      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
         <H2 as="h2" margin="0 0 32px 0">
           Leaderboard
         </H2>

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -175,7 +175,7 @@ const MyEntries = (props) => {
 
   const desktopRender = () => {
     return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
+      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
         <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
           <H2 as="h2" margin="0 0 32px 0">
             My Entries
@@ -189,7 +189,7 @@ const MyEntries = (props) => {
               headerElements={getMyEntriesHeader()}
               possibleMetrics={getPossibleMetrics()}
               gridTemplateColumns={
-                '1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1)
+                '1fr ' + '3fr '.repeat(getMyEntriesHeader().length - 2) + ' 4fr'
               }
               staticColumnElements={[
                 { name: 'id', format: null, order: 1, align: 'left' },

src/components/specific_challenge/Table.js

@@ -106,6 +106,8 @@ const Table = (props) => {
           order={props.iterableColumnElement.order}
           textAlign={props.iterableColumnElement.align}
           minWidth="72px"
+          margin="auto 0"
+          overflowWrap="anywhere"
         >
           {IS_MOBILE() && (
             <Container className="mobile-table-header">
@@ -130,6 +132,8 @@ const Table = (props) => {
           as="td"
           order={elemName.order}
           textAlign={elemName.align}
+          margin="auto 0"
+          overflowWrap="anywhere"
         >
           {IS_MOBILE() && (
             <Container className="mobile-table-header">
@@ -156,7 +160,8 @@ const Table = (props) => {
               gridGap="20px"
               position="relative"
               width="100%"
-              padding="4px"
+              padding="0 6px"
+              minHeight="44px"
               margin="0 0 6px 0"
               gridTemplateColumns={props.gridTemplateColumns}
             >
@@ -183,8 +188,8 @@ const Table = (props) => {
                       cursor={elem !== '#' ? 'pointer' : ''}
                       textAlign={elem === 'when' ? 'right' : 'left'}
                       width={elem === 'when' ? '100%' : 'auto'}
-                      padding="0 6px 0 0"
-                      overflowWrap="break-word"
+                      padding="0 4px 0 0"
+                      overflowWrap="anywhere"
                       minWidth={elem === 'result' ? '72px' : 'none'}
                     >
                       {elem.replace('.', ' ')}
@@ -200,7 +205,12 @@ const Table = (props) => {
                   </FlexRow>
                 );
               })}
-              <Line height="2px" top="100%" as="td" shadow={theme.shadow} />
+              <Line
+                height="2px"
+                top="calc(100% + 2px)"
+                as="td"
+                shadow={theme.shadow}
+              />
             </Grid>
             {elementsToMap.map((elem, index) => {
               return (
@@ -215,6 +225,7 @@ const Table = (props) => {
                   position="relative"
                   width="100%"
                   padding="4px"
+                  minHeight="48px"
                 >
                   {rowRender(elem)}
                   {props.headerElements ? metricsRender(elem) : ''}

src/utils/fonts.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import {Container} from './containers';
+import { Container } from './containers';
 
 const H1 = styled(Container)`
   display: inline-block;
@@ -8,7 +8,7 @@ const H1 = styled(Container)`
   font-size: 24px;
   line-height: 24px;
   letter-spacing: 0.1px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 48px;
     line-height: 52px;
   }
@@ -16,7 +16,7 @@ const H1 = styled(Container)`
 
 const H2 = styled(H1)`
   font-size: 20px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 32px;
     line-height: 36px;
   }
@@ -25,9 +25,12 @@ const H2 = styled(H1)`
 const H3 = styled(H1)`
   font-size: 18px;
   line-height: 22px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  font-size: ${({ fontSize }) => (fontSize ? fontSize : '18px')};
+
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 24px;
     line-height: 26px;
+    font-size: ${({ fontSize }) => (fontSize ? fontSize : '24px')};
   }
 `;
 
@@ -37,7 +40,7 @@ const Body = styled(Container)`
   font-weight: 300;
   font-size: 14px;
   line-height: 20px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
@@ -46,9 +49,9 @@ const Body = styled(Container)`
 
 const Medium = styled(Body)`
   font-weight: 400;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-weight: 500;
-    font-size: ${({fontSize}) => fontSize ? fontSize : '16px'}
+    font-size: ${({ fontSize }) => (fontSize ? fontSize : '16px')};
   }
 `;
 
@@ -63,7 +66,7 @@ const Menu = styled(Container)`
 const Label = styled(Menu)`
   display: inline-block;
   font-weight: 300;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 22px;
     line-height: 24px;
   }
@@ -75,22 +78,22 @@ const Code = styled(Container)`
   font-size: 12px;
   line-height: 18px;
   font-weight: 300;
-  color: ${({theme}) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.white};
   max-width: 600px;
   overflow-wrap: break-word;
 
   &:before {
-    display: ${({before}) => before ? 'inline-block' : 'none'};
+    display: ${({ before }) => (before ? 'inline-block' : 'none')};
     content: '~$';
-    color: ${({theme}) => theme.colors.green};
+    color: ${({ theme }) => theme.colors.green};
     font-weight: 400;
     margin: 0 4px 0 0;
-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
       font-weight: 500;
     }
   }
 
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -98,11 +101,11 @@ const Code = styled(Container)`
 `;
 
 const CodeMedium = styled(Code)`
-  color: ${({theme}) => theme.colors.green};
+  color: ${({ theme }) => theme.colors.green};
   font-weight: 400;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-weight: 500;
   }
 `;
 
-export {H1, H2, H3, Body, Medium, Menu, Label, Code, CodeMedium};
+export { H1, H2, H3, Body, Medium, Menu, Label, Code, CodeMedium };