From 8cd541f66550ec511a42283884ce74078d2fc8ac Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 30 Jun 2023 11:39:05 -0700
Subject: [PATCH] Improve the header on very small screens

---
 .../templates/article/VerticalArticleActions.tsx  | 15 +++++++++++++++
 .../components/templates/reader/ReaderHeader.tsx  |  6 ------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/templates/article/VerticalArticleActions.tsx b/packages/web/components/templates/article/VerticalArticleActions.tsx
index cd535b904..b026e1104 100644
--- a/packages/web/components/templates/article/VerticalArticleActions.tsx
+++ b/packages/web/components/templates/article/VerticalArticleActions.tsx
@@ -43,6 +43,9 @@ export function VerticalArticleActionsMenu(
           css={{
             display: 'flex',
             alignItems: 'center',
+            '@media (max-width: 300px)': {
+              display: 'none',
+            },
           }}
         >
           <Tag size={24} color={theme.colors.thHighContrast.toString()} />
@@ -54,6 +57,9 @@ export function VerticalArticleActionsMenu(
           css={{
             display: 'flex',
             alignItems: 'center',
+            '@media (max-width: 300px)': {
+              display: 'none',
+            },
           }}
         >
           <TooltipWrapped
@@ -114,6 +120,9 @@ export function VerticalArticleActionsMenu(
             css={{
               display: 'flex',
               alignItems: 'center',
+              '@media (max-width: 300px)': {
+                display: 'none',
+              },
             }}
           >
             <TooltipWrapped
@@ -133,6 +142,9 @@ export function VerticalArticleActionsMenu(
             css={{
               display: 'flex',
               alignItems: 'center',
+              '@media (max-width: 300px)': {
+                display: 'none',
+              },
             }}
           >
             <TooltipWrapped
@@ -149,6 +161,9 @@ export function VerticalArticleActionsMenu(
           css={{
             display: 'flex',
             alignItems: 'center',
+            '@media (max-width: 300px)': {
+              display: 'none',
+            },
           }}
         >
           <TooltipWrapped
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 4783e363c..4a4ccbce2 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -65,9 +65,6 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
                 display: props.alwaysDisplayToolbar ? 'flex' : 'none',
               },
               '@mdDown': { px: '15px' },
-              '@media (max-width: 300px)': {
-                display: 'none',
-              },
             }}
           >
             {props.children}
@@ -79,9 +76,6 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
                 '@lgDown': {
                   display: 'none',
                 },
-                '@media (max-width: 300px)': {
-                  display: 'flex',
-                },
               }}
             >
               <ControlButtonBox {...props} />