From 255ba408f6d20ce354b93ecb202123cc2892a182 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 30 Jun 2023 09:08:01 -0700
Subject: [PATCH] Fix reader header on very narrow screens like the Samsung
 Fold

---
 packages/web/components/templates/reader/ReaderHeader.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 4a4ccbce2..4783e363c 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -65,6 +65,9 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
                 display: props.alwaysDisplayToolbar ? 'flex' : 'none',
               },
               '@mdDown': { px: '15px' },
+              '@media (max-width: 300px)': {
+                display: 'none',
+              },
             }}
           >
             {props.children}
@@ -76,6 +79,9 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
                 '@lgDown': {
                   display: 'none',
                 },
+                '@media (max-width: 300px)': {
+                  display: 'flex',
+                },
               }}
             >
               <ControlButtonBox {...props} />