client: mobile post page adjustments with longer button bar

client/components/header/header.module.css

@@ -1,7 +1,7 @@
 .tabs {
 	justify-content: center;
 	display: flex;
-	margin-top: var(--gap);
+	margin: var(--gap) 0;
 }
 
 .tabs .buttons {
@@ -22,7 +22,7 @@
 }
 
 .mobile {
-	position: relative;
+	position: absolute;
 	z-index: 1;
 }
 

client/components/header/index.tsx

@@ -174,7 +174,7 @@ const Header = () => {
     const buttons = useMemo(() => pages.map(getButton), [pages, getButton])
 
     return (
-        <Page.Header height={'var(--page-nav-height)'} marginBottom={2}>
+        <Page.Header>
             <div className={styles.tabs}>
                 <div className={styles.buttons}>
                     {buttons}
@@ -192,7 +192,8 @@ const Header = () => {
                     <MenuIcon />
                 </Button>
             </div>
-            {isMobile && expanded && (<div className={styles.mobile}>
+            {/* setExpanded should occur elsewhere; we don't want to close if they change themes */}
+            {isMobile && expanded && (<div className={styles.mobile} onClick={() => setExpanded(!expanded)}>
                 <ButtonGroup vertical style={{
                     background: "var(--bg)",
                 }}>

client/components/post-page/index.tsx

@@ -89,20 +89,8 @@ const PostPage = ({ post }: Props) => {
 
             <Page.Content className={homeStyles.main}>
                 <div className={styles.header}>
-                    <span className={styles.title}>
-                        <Text h3>{post.title}</Text>
-                        <span className={styles.badges}>
-                            <VisibilityBadge visibility={post.visibility} />
-                            <CreatedAgoBadge createdAt={post.createdAt} />
-                            <ExpirationBadge postExpirationDate={post.expiresAt} />
-                        </span>
-                    </span>
-
                     <span className={styles.buttons}>
-                        <ButtonGroup vertical={isMobile}>
-                            <Button auto onClick={download} icon={<Archive />} style={{ textTransform: 'none' }}>
-                                Download as ZIP Archive
-                            </Button>
+                        <ButtonGroup vertical={isMobile} marginLeft={0} marginRight={0} marginTop={1} marginBottom={1}>
                             <Button
                                 auto
                                 icon={<Edit />}
@@ -117,9 +105,22 @@ const PostPage = ({ post }: Props) => {
                             >
                                 View Parent
                             </Button>}
+                            <Button auto onClick={download} icon={<Archive />} style={{ textTransform: 'none' }}>
+                                Download as ZIP Archive
+                            </Button>
                             <FileDropdown isMobile={isMobile} files={post.files || []} />
                         </ButtonGroup>
                     </span>
+                    <span className={styles.title}>
+                        <Text h3>{post.title}</Text>
+                        <span className={styles.badges}>
+                            <VisibilityBadge visibility={post.visibility} />
+                            <CreatedAgoBadge createdAt={post.createdAt} />
+                            <ExpirationBadge postExpirationDate={post.expiresAt} />
+                        </span>
+                    </span>
+
+
                 </div>
                 {/* {post.files.length > 1 && <FileTree files={post.files} />} */}
                 {post.files?.map(({ id, content, title }: File) => (

client/components/post-page/post-page.module.css

@@ -3,7 +3,6 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: var(--gap);
 }
 
 .header .title .badges {
@@ -20,6 +19,7 @@
 .header .buttons {
 	display: flex;
 	justify-content: flex-end;
+	margin-bottom: var(--gap);
 }
 
 @media screen and (max-width: 900px) {

client/components/scroll-to-top/index.tsx

@@ -15,10 +15,11 @@ const ScrollToTop = () => {
     }, [])
 
     const isReducedMotion = typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false
-    const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        // blur the button
+    const onClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
         e.currentTarget.blur()
+
         window.scrollTo({ top: 0, behavior: isReducedMotion ? 'auto' : 'smooth' })
+
     }
 
     return (

client/styles/globals.css

@@ -29,7 +29,6 @@
 	--transition: 0.1s ease-in-out;
 	--transition-slow: 0.3s ease-in-out;
 
-	--page-nav-height: 64px;
 	--token: #999;
 	--comment: #999;
 	--keyword: #fff;