optimize editor navigation by removing shortcuts on mobile, more space to tabs

components/ButtonGroup.tsx

@@ -6,11 +6,14 @@ const ButtonGroup = styled('div', {
   marginLeft: '1px',
   [`& ${StyledButton}`]: {
     marginLeft: '-1px',
-    px: '$4',
+    px: '0.65rem',
     zIndex: 2,
     position: 'relative',
     '&:hover, &:focus': {
       zIndex: 200
+    },
+    '@sm': {
+      px: '$4'
     }
   },
   [`& ${StyledButton}:not(:only-of-type):not(:first-child):not(:last-child)`]: {

components/Dialog.tsx

@@ -40,11 +40,10 @@ const StyledContent = styled(DialogPrimitive.Content, {
   color: '$mauve12',
   borderRadius: '$md',
   position: 'relative',
-  mb: '15%',
+  mb: '0%',
   boxShadow: '0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)',
   width: '90vw',
   maxWidth: '450px',
-  // maxHeight: "85vh",
   padding: 25,
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
@@ -53,6 +52,9 @@ const StyledContent = styled(DialogPrimitive.Content, {
   '.dark &': {
     backgroundColor: '$mauve5',
     boxShadow: '0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)'
+  },
+  '@md': {
+    mb: '8%'
   }
 })
 

components/EditorNavigation.tsx

@@ -78,7 +78,6 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
   return (
     <Flex css={{ flexShrink: 0, gap: '$0' }}>
       <Flex
-        id="kissa"
         ref={scrollRef}
         css={{
           overflowX: 'scroll',
@@ -181,7 +180,21 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
               </DropdownMenuContent>
             </DropdownMenu>
           ) : (
-            <Button outline size="sm" css={{ mr: '$3' }} onClick={() => setPopUp(true)}>
+            <Button
+              outline
+              size="sm"
+              css={{
+                mr: '-1px',
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                '@sm': {
+                  borderTopRightRadius: '$sm',
+                  borderBottomRightRadius: '$sm',
+                  mr: '$3'
+                }
+              }}
+              onClick={() => setPopUp(true)}
+            >
               <GithubLogo size="16px" /> Login
             </Button>
           )}
@@ -202,6 +215,9 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
                 alignSelf: 'flex-start',
                 boxShadow: 'none'
               },
+              'button:not(:last-child)': {
+                display: 'none'
+              },
               'button:not(:first-child):not(:last-child)': {
                 borderRight: 0,
                 borderLeft: 0
@@ -217,6 +233,11 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
                 '&:hover': {
                   boxShadow: 'inset 0px 0px 0px 1px $colors$mauve12'
                 }
+              },
+              '@sm': {
+                'button:not(:last-child)': {
+                  display: 'flex'
+                }
               }
             }}
           >

components/Navigation.tsx

@@ -33,7 +33,7 @@ import { styled } from '../stitches.config'
 const ImageWrapper = styled(Flex, {
   position: 'relative',
   mt: '$2',
-  mb: '$10',
+  mb: '$6',
   svg: {
     // fill: "red",
     '.angle': {
@@ -66,16 +66,23 @@ const Navigation = () => {
       <Container
         css={{
           display: 'flex',
-          alignItems: 'center'
+          alignItems: 'center',
+          px: '$3',
+          '@sm': {
+            px: '$4'
+          }
         }}
       >
         <Flex
           css={{
             flex: 1,
             alignItems: 'center',
-            borderRight: '1px solid $colors$mauve6',
             py: '$3',
+            pr: '$0',
+            '@sm': {
+              borderRight: '1px solid $colors$mauve6',
               pr: '$4'
+            }
           }}
         >
           <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
@@ -84,7 +91,11 @@ const Navigation = () => {
               css={{
                 display: 'flex',
                 alignItems: 'center',
-                color: '$textColor'
+                color: '$textColor',
+                mr: '$2',
+                '@sm': {
+                  mr: '$4'
+                }
               }}
             >
               <Logo width="32px" height="32px" />
@@ -92,9 +103,12 @@ const Navigation = () => {
           </Link>
           <Flex
             css={{
-              ml: '$5',
               flexDirection: 'column',
-              gap: '1px'
+              gap: '1px',
+              display: 'none',
+              '@md': {
+                display: 'flex'
+              }
             }}
           >
             {snap.loading ? (
@@ -135,8 +149,8 @@ const Navigation = () => {
                   css={{
                     display: 'flex',
                     maxWidth: '1080px',
-                    width: '80vw',
-                    maxHeight: '80%',
+                    width: '90vw',
+                    maxHeight: '90%',
                     backgroundColor: '$mauve1 !important',
                     overflowY: 'auto',
                     background: 'black',
@@ -265,15 +279,18 @@ const Navigation = () => {
                         gridTemplateColumns: '1fr',
                         gridTemplateRows: 'max-content',
                         flex: 1,
-                        p: '$7',
-                        pb: '$16',
+                        p: '$4',
+                        pb: '$8',
                         gap: '$3',
                         alignItems: 'normal',
                         flexWrap: 'wrap',
                         backgroundColor: '$mauve1',
                         '@md': {
                           gridTemplateColumns: '1fr 1fr',
-                          gridTemplateRows: 'max-content'
+                          gridTemplateRows: 'max-content',
+                          p: '$7',
+                          pb: '$10',
+                          paddingRight: '$12'
                         },
                         '@lg': {
                           gridTemplateColumns: '1fr 1fr 1fr',
@@ -316,23 +333,30 @@ const Navigation = () => {
         <Flex
           css={{
             flexWrap: 'nowrap',
-            marginLeft: '$4',
+            marginLeft: '$2',
             overflowX: 'scroll',
             '&::-webkit-scrollbar': {
               height: 0,
               background: 'transparent'
             },
             scrollbarColor: 'transparent',
-            scrollbarWidth: 'none'
+            scrollbarWidth: 'none',
+            '@sm': {
+              marginLeft: '$4'
+            }
           }}
         >
           <Stack
             css={{
-              ml: '$4',
-              gap: '$3',
+              ml: '$0',
+              gap: '$2',
               flexWrap: 'nowrap',
               alignItems: 'center',
-              marginLeft: 'auto'
+              marginLeft: 'auto',
+              '@sm': {
+                marginLeft: '$4',
+                gap: '$3'
+              }
             }}
           >
             <ButtonGroup>

components/PanelBox.tsx

@@ -7,7 +7,7 @@ const PanelBox = styled('div', {
   flexDirection: 'column',
   border: '1px solid $colors$mauve6',
   backgroundColor: '$mauve2',
-  padding: '$3',
+  padding: '$5',
   borderRadius: '$sm',
   fontWeight: 'lighter',
   height: 'auto',

components/Transaction/index.tsx

@@ -185,11 +185,16 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         row
         css={{
           justifyContent: 'space-between',
+          width: '100%',
+          mb: '$2',
+          mt: '$1',
+          '@md': {
             position: 'absolute',
             left: 0,
             bottom: 0,
-          width: '100%',
-          mb: '$1'
+            mt: '$0',
+            mb: '$2'
+          }
         }}
       >
         <Button

components/Transaction/ui.tsx

@@ -137,11 +137,14 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
           row
           fluid
           css={{
-            justifyContent: 'flex-end',
+            justifyContent: 'space-between',
             alignItems: 'center',
             mb: '$3',
             mt: '1px',
-            pr: '1px'
+            pr: '1px',
+            '@xl': {
+              justifyContent: 'flex-end'
+            }
           }}
         >
           <Text muted css={{ mr: '$3' }}>
@@ -152,7 +155,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
             placeholder="Select transaction type"
             options={transactionsOptions}
             hideSelectedOptions
-            css={{ width: '70%' }}
+            css={{
+              width: '60%',
+              minWidth: '200px',
+              '@lg': {
+                width: '70%'
+              }
+            }}
             value={selectedTransaction}
             onChange={(tt: any) => handleChangeTxType(tt)}
           />
@@ -161,10 +170,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
           row
           fluid
           css={{
-            justifyContent: 'flex-end',
+            justifyContent: 'space-between',
             alignItems: 'center',
             mb: '$3',
-            pr: '1px'
+            pr: '1px',
+            '@xl': {
+              justifyContent: 'flex-end'
+            }
           }}
         >
           <Text muted css={{ mr: '$3' }}>
@@ -173,7 +185,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
           <Select
             instanceId="from-account"
             placeholder="Select your account"
-            css={{ width: '70%' }}
+            css={{
+              width: '60%',
+              minWidth: '200px',
+              '@lg': {
+                width: '70%'
+              }
+            }}
             options={accountOptions}
             value={selectedAccount}
             onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
@@ -184,10 +202,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
             row
             fluid
             css={{
-              justifyContent: 'flex-end',
+              justifyContent: 'space-between',
               alignItems: 'center',
               mb: '$3',
-              pr: '1px'
+              pr: '1px',
+              '@xl': {
+                justifyContent: 'flex-end'
+              }
             }}
           >
             <Text muted css={{ mr: '$3' }}>
@@ -196,7 +217,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
             <Select
               instanceId="to-account"
               placeholder="Select the destination account"
-              css={{ width: '70%' }}
+              css={{
+                width: '60%',
+                minWidth: '200px',
+                '@lg': {
+                  width: '70%'
+                }
+              }}
               options={destAccountOptions}
               value={selectedDestAccount}
               isClearable
@@ -229,9 +256,12 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                 row
                 fluid
                 css={{
-                  justifyContent: 'flex-end',
+                  justifyContent: 'space-between',
                   alignItems: 'center',
-                  position: 'relative'
+                  position: 'relative',
+                  '@xl': {
+                    justifyContent: 'flex-end'
+                  }
                 }}
               >
                 <Text muted css={{ mr: '$3' }}>
@@ -244,9 +274,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                     spellCheck={false}
                     onChange={switchToJson}
                     css={{
-                      width: '70%',
+                      width: '60%',
+                      minWidth: '200px',
                       flex: 'inherit',
-                      resize: 'vertical'
+                      resize: 'vertical',
+                      '@lg': {
+                        width: '70%'
+                      }
                     }}
                   />
                 ) : (
@@ -271,7 +305,8 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                         : undefined
                     }
                     css={{
-                      width: '70%',
+                      width: '60%',
+                      minWidth: '200px',
                       flex: 'inherit',
                       '-moz-appearance': 'textfield',
                       '&::-webkit-outer-spin-button': {
@@ -281,6 +316,9 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                       '&::-webkit-inner-spin-button ': {
                         '-webkit-appearance': 'none',
                         margin: 0
+                      },
+                      '@lg': {
+                        width: '70%'
                       }
                     }}
                   />

pages/test/[[...slug]].tsx

@@ -68,6 +68,7 @@ const Test = () => {
             justifyContent: 'center',
             p: '$3 $2'
           }}
+          className="split-mobile-forceAutoHeight"
         >
           <Split
             direction="horizontal"
@@ -82,6 +83,7 @@ const Test = () => {
               height: '100%'
             }}
             onDragEnd={e => saveSplit('testHorizontal', e)}
+            className="split-mobile-forceVertical"
           >
             <Box css={{ width: '55%', px: '$2' }}>
               <Tabs
@@ -105,7 +107,18 @@ const Test = () => {
                 ))}
               </Tabs>
             </Box>
-            <Box css={{ width: '45%', mx: '$2', height: '100%' }}>
+            <Box
+              css={{
+                width: '45%',
+                mx: '$0',
+                mt: '$1',
+                height: '100%',
+                '@md': {
+                  mx: '$2',
+                  mt: '$0'
+                }
+              }}
+            >
               <Accounts card hideDeployBtn showHookStats />
             </Box>
           </Split>
@@ -131,6 +144,7 @@ const Test = () => {
         <Flex>
           <Split
             direction="horizontal"
+            className="split-mobile-forceVertical"
             sizes={[50, 50]}
             minSize={[320, 160]}
             gutterSize={4}

styles/globals.css

@@ -54,3 +54,15 @@ html.light .gutter-horizontal:hover {
 .monaco-editor .monaco-hover {
   z-index: 9999;
 }
+
+@media screen and (max-width: 48rem) {
+  .split-mobile-forceAutoHeight {
+    height: auto !important;
+  }
+  .split-mobile-forceVertical {
+    flex-direction: column !important;
+  }
+  .split-mobile-forceVertical > div {
+    width: 100% !important;
+  }
+}