From 41160c41c7446c1292c9ed781b9ebe5b21f5c708 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 8 Jun 2023 15:32:40 +0800
Subject: [PATCH] Better responsive handling of header items

---
 .../templates/homeFeed/LibraryHeader.tsx       | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 7d0086f7b..2ca1543ae 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -396,7 +396,7 @@ function MultiSelectControlButtonBox(
           height={20}
           color={theme.colors.thTextContrast2.toString()}
         />
-        Archive
+        <SpanBox css={{ '@lgDown': { display: 'none' } }}>Archive</SpanBox>
       </Button>
       <Button
         style="outline"
@@ -412,7 +412,7 @@ function MultiSelectControlButtonBox(
           height={20}
           color={theme.colors.thTextContrast2.toString()}
         />
-        Label
+        <SpanBox css={{ '@lgDown': { display: 'none' } }}>Label</SpanBox>
       </Button>
       <Button
         style="outline"
@@ -426,7 +426,7 @@ function MultiSelectControlButtonBox(
           height={20}
           color={theme.colors.thTextContrast2.toString()}
         />
-        Delete
+        <SpanBox css={{ '@lgDown': { display: 'none' } }}>Delete</SpanBox>
       </Button>
       <Button
         style="cancel"
@@ -584,13 +584,21 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
             </SpanBox>
             <SpanBox
               css={{
-                paddingLeft: '10px',
+                paddingLeft: '5px',
                 fontSize: '12px',
                 fontWeight: '600',
                 fontFamily: '$inter',
+                '@xlgDown': {
+                  paddingLeft: '5px',
+                },
               }}
             >
-              {props.numItemsSelected} selected
+              {props.numItemsSelected}{' '}
+              <SpanBox
+                css={{ '@media (max-width: 1280px)': { display: 'none' } }}
+              >
+                selected
+              </SpanBox>
             </SpanBox>
           </SpanBox>
         )}