From 1f0d60424e7ade2197c3879bfb36c7981e034ba1 Mon Sep 17 00:00:00 2001
From: Emily Strickland <github@emily.st>
Date: Sat, 12 Mar 2022 11:53:55 -0800
Subject: [PATCH] Minor wording change for "Download" link

Suggesting this change simply because "ZIP" appears to be (per its specification published by PKWARE) canonically spelled uppercase.

I also added the word "archive" to provide a noun modified by "ZIP" rather than treating "ZIP" as a noun itself. It seems clearer this way, but may cause text flow issues in the design if it's too long.
---
 client/pages/post/[id].tsx          |  7 ++++---
 client/pages/post/styles.module.css | 11 +++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 client/pages/post/styles.module.css

diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx
index fba808da..b5bce189 100644
--- a/client/pages/post/[id].tsx
+++ b/client/pages/post/[id].tsx
@@ -8,6 +8,8 @@ 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';
 
 const Post = ({ theme, changeTheme }: ThemeProps) => {
     const [post, setPost] = useState<any>()
@@ -83,10 +85,10 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
                     <Document skeleton={true} />
                 </>}
                 {!isLoading && post && <>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div className={styles.header}>
                         <Text h2>{post.title} <VisibilityBadge visibility={post.visibility} /></Text>
                         <Button auto onClick={download}>
-                            Download as Zip
+                            Download as ZIP archive
                         </Button>
                     </div>
                     {post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
@@ -106,4 +108,3 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
 }
 
 export default Post
-
diff --git a/client/pages/post/styles.module.css b/client/pages/post/styles.module.css
new file mode 100644
index 00000000..5bcfe224
--- /dev/null
+++ b/client/pages/post/styles.module.css
@@ -0,0 +1,11 @@
+.header {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+}
+
+@media screen and (max-width: 650px) {
+    .header {
+        flex-direction: column;
+    }
+}
\ No newline at end of file