From 1deed8a50941b37f334639a2478dfb21d9eeb1d0 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 21 Aug 2024 13:23:00 +0800
Subject: [PATCH] Improve the reader header on smaller screens

---
 .../article/VerticalArticleActions.tsx        | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/web/components/templates/article/VerticalArticleActions.tsx b/packages/web/components/templates/article/VerticalArticleActions.tsx
index 689faefab..82b05855e 100644
--- a/packages/web/components/templates/article/VerticalArticleActions.tsx
+++ b/packages/web/components/templates/article/VerticalArticleActions.tsx
@@ -35,30 +35,15 @@ export function VerticalArticleActionsMenu(
           gap: '30px',
         }}
       >
-        <Button
-          title="Edit labels (l)"
-          style="articleActionIcon"
-          onClick={() => props.articleActionHandler('setLabels')}
-          css={{
-            display: 'flex',
-            alignItems: 'center',
-            '@media (max-width: 300px)': {
-              display: 'none',
-            },
-          }}
-        >
-          <LabelIcon size={24} color={theme.colors.thHighContrast.toString()} />
-        </Button>
-
         <Button
           title="Open notebook (t)"
           style="articleActionIcon"
           onClick={() => props.articleActionHandler('showHighlights')}
           css={{
-            display: 'flex',
+            display: 'none',
             alignItems: 'center',
-            '@media (max-width: 300px)': {
-              display: 'none',
+            '@media (min-width: 500px)': {
+              display: 'flex',
             },
           }}
         >
@@ -73,10 +58,10 @@ export function VerticalArticleActionsMenu(
           style="articleActionIcon"
           onClick={() => props.articleActionHandler('showEditModal')}
           css={{
-            display: 'flex',
+            display: 'none',
             alignItems: 'center',
-            '@mdDown': {
-              display: 'none',
+            '@media (min-width: 420px)': {
+              display: 'flex',
             },
           }}
         >
@@ -86,6 +71,21 @@ export function VerticalArticleActionsMenu(
           />
         </Button>
 
+        <Button
+          title="Edit labels (l)"
+          style="articleActionIcon"
+          onClick={() => props.articleActionHandler('setLabels')}
+          css={{
+            display: 'none',
+            alignItems: 'center',
+            '@media (min-width: 400px)': {
+              display: 'flex',
+            },
+          }}
+        >
+          <LabelIcon size={24} color={theme.colors.thHighContrast.toString()} />
+        </Button>
+
         <Button
           title="Remove (#)"
           style="articleActionIcon"
@@ -108,9 +108,6 @@ export function VerticalArticleActionsMenu(
             css={{
               display: 'flex',
               alignItems: 'center',
-              '@media (max-width: 300px)': {
-                display: 'none',
-              },
             }}
           >
             <ArchiveIcon
@@ -126,9 +123,6 @@ export function VerticalArticleActionsMenu(
             css={{
               display: 'flex',
               alignItems: 'center',
-              '@media (max-width: 300px)': {
-                display: 'none',
-              },
             }}
           >
             <UnarchiveIcon