client: improve responsiveness

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>

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.Container>
-                <Grid xs={8}>
+                <Grid md={14} xs={14}>
-                    <Text h3 paddingLeft={1 / 2}>
+                    <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 paddingLeft={1 / 2} md={5} xs={9}><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={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid>
             </Grid.Container>
 
             <Divider h="1px" my={0} />

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;
 }
 

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}

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>

client/pages/post/styles.module.css

@@ -1,11 +1,23 @@
 .header {
-   display: flex;
+  display: flex;
-   justify-content: space-between;
+  justify-content: space-between;
-   align-items: center;
+  align-items: center;
+}
+
+.header .titleAndBadge {
+  display: flex;
+  text-align: center;
+  justify-content: space-between;
+  align-items: center;
 }
 
 @media screen and (max-width: 650px) {
-    .header {
+  .header {
-        flex-direction: column;
+    flex-direction: column;
-    }
+  }
-}
+
+  .header .titleAndBadge {
+    flex-direction: column;
+    padding-bottom: var(--gap-double);
+  }
+}