From 9ba17db6f9f75ed8c386e5615213ae74f16594df Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Sun, 20 Mar 2022 20:45:37 -0700
Subject: [PATCH] client: improve responsiveness

---
 client/components/document/index.tsx          |  1 +
 client/components/post-list/list-item.tsx     | 10 +++----
 client/components/preview/preview.module.css  |  2 --
 .../preview/react-markdown-preview.tsx        |  2 +-
 client/pages/post/[id].tsx                    |  9 ++++---
 client/pages/post/styles.module.css           | 26 ++++++++++++++-----
 6 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/client/components/document/index.tsx b/client/components/document/index.tsx
index 4b1a08ff..a1040541 100644
--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@@ -114,6 +114,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
                         label="Filename"
                         disabled={!editable}
                         width={"100%"}
+                        id={title}
                     />
                     {remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
                 </div>
diff --git a/client/components/post-list/list-item.tsx b/client/components/post-list/list-item.tsx
index 3e9e8d26..30c37ecd 100644
--- a/client/components/post-list/list-item.tsx
+++ b/client/components/post-list/list-item.tsx
@@ -30,17 +30,17 @@ const ListItem = ({ post }: { post: any }) => {
     return (<li key={post.id}>
         <Card style={{ overflowY: 'scroll' }}>
             <Spacer height={1 / 2} />
-            <Grid.Container justify={'space-between'}>
-                <Grid xs={8}>
-                    <Text h3 paddingLeft={1 / 2}>
+            <Grid.Container>
+                <Grid md={14} xs={14}>
+                    <Text h3 paddingLeft={1 / 2} >
                         <NextLink passHref={true} href={`/post/${post.id}`}>
                             <Link color>{post.title}
                                 <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
                             </Link>
                         </NextLink>
                     </Text></Grid>
-                <Grid xs={7}><Text type="secondary" h5><Tooltip text={formattedTime}>{time}</Tooltip></Text></Grid>
-                <Grid xs={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid>
+                <Grid paddingLeft={1 / 2} md={5} xs={9}><Text type="secondary" h5><Tooltip text={formattedTime}>{time}</Tooltip></Text></Grid>
+                <Grid paddingLeft={1 / 2} md={5} xs={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid>
             </Grid.Container>
 
             <Divider h="1px" my={0} />
diff --git a/client/components/preview/preview.module.css b/client/components/preview/preview.module.css
index 6250035c..bfd181da 100644
--- a/client/components/preview/preview.module.css
+++ b/client/components/preview/preview.module.css
@@ -87,8 +87,6 @@
   border-radius: 3px;
   white-space: pre-wrap;
   word-wrap: break-word;
-  color: initial;
-  background-color: #f5f5f5;
   padding: 2px 4px;
 }
 
diff --git a/client/components/preview/react-markdown-preview.tsx b/client/components/preview/react-markdown-preview.tsx
index fc4e6416..92d9963d 100644
--- a/client/components/preview/react-markdown-preview.tsx
+++ b/client/components/preview/react-markdown-preview.tsx
@@ -36,7 +36,7 @@ const ReactMarkdownPreview = ({ content, height }: Props) => {
                                 background: 'transparent'
                             }}
                             codeTagProps={{
-                                style: { background: 'transparent' }
+                                style: { background: 'transparent', color: 'inherit' }
                             }}
                             style={themeType === 'dark' ? dark : light}
                             showLineNumbers={true}
diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx
index 115b69fb..0bd32738 100644
--- a/client/pages/post/[id].tsx
+++ b/client/pages/post/[id].tsx
@@ -8,7 +8,6 @@ import Header from "../../components/header";
 import VisibilityBadge from "../../components/visibility-badge";
 import { ThemeProps } from "../_app";
 import PageSeo from "components/page-seo";
-import Head from "next/head";
 import styles from './styles.module.css';
 import Cookies from "js-cookie";
 
@@ -80,14 +79,18 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
                 <Header theme={theme} changeTheme={changeTheme} />
             </Page.Header>
             <Page.Content width={"var(--main-content-width)"} margin="auto">
+                {/* {!isLoading && <PostFileExplorer files={post.files} />} */}
+
                 {error && <Text type="error">{error}</Text>}
-                {/* {!error && (isLoading || !post?.files) && <Loading />} */}
                 {!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
                     <Document skeleton={true} />
                 </>}
                 {!isLoading && post && <>
                     <div className={styles.header}>
-                        <Text h2>{post.title} <VisibilityBadge visibility={post.visibility} /></Text>
+                        <div className={styles.titleAndBadge}>
+                            <Text h2>{post.title}</Text>
+                            <span><VisibilityBadge visibility={post.visibility} /></span>
+                        </div>
                         <Button auto onClick={download}>
                             Download as ZIP archive
                         </Button>
diff --git a/client/pages/post/styles.module.css b/client/pages/post/styles.module.css
index 5bcfe224..9691f87f 100644
--- a/client/pages/post/styles.module.css
+++ b/client/pages/post/styles.module.css
@@ -1,11 +1,23 @@
 .header {
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header .titleAndBadge {
+  display: flex;
+  text-align: center;
+  justify-content: space-between;
+  align-items: center;
 }
 
 @media screen and (max-width: 650px) {
-    .header {
-        flex-direction: column;
-    }
-}
\ No newline at end of file
+  .header {
+    flex-direction: column;
+  }
+
+  .header .titleAndBadge {
+    flex-direction: column;
+    padding-bottom: var(--gap-double);
+  }
+}