client: improved mobile stylings

client/components/document/index.tsx

@@ -55,7 +55,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
                         disabled={!editable}
                         width={"100%"}
                     />
-                    {remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
+                    {remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
                 </div>
                 <div className={styles.descriptionContainer}>
                     {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}

client/components/header/header.module.css

@@ -30,10 +30,10 @@
   }
 }
 
-.controls {
-  flex: 1 1;
-  display: flex;
-  align-items: center;
+.controls button:active,
+.controls button:focus,
+.controls button:hover {
+  outline: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .wrapper {

client/components/header/index.tsx

@@ -121,8 +121,10 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
                 <Button
                     auto
                     type="abort"
-                    onClick={() => setExpanded(!expanded)}>
-                    <MenuIcon size="1.125rem" />
+                    onClick={() => setExpanded(!expanded)}
+                >
+                    <Spacer height={5 / 6} width={0} />
+                    <MenuIcon size="1.5rem" />
                 </Button>
             </div>
             {isMobile && expanded && (<div className={styles.mobile}>

client/components/post/post.module.css

@@ -10,12 +10,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
 }
 
-.title > div {
-  flex-grow: 1;
+@media screen and (max-width: 650px) {
+  .title {
+    align-items: flex-start;
+    flex-direction: column;
   }
-
-.mygist {
-  flex-grow: 0.4;
 }

client/components/post/title/index.tsx

@@ -17,8 +17,8 @@ type props = {
 
 const Title = ({ setTitle, title }: props) => {
     return (<div className={styles.title}>
-        <Text h1 width={"150px"} className={styles.drift}>Drift &mdash;</Text>
-        <ShiftBy y={-6}>
+        <Text h1 width={"150px"} className={styles.drift}>Drift</Text>
+        <ShiftBy y={-3}>
             <Input
                 placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]}
                 value={title || ""}