Merge pull request #2448 from omnivore-app/fix/web-very-narrow-screens

Fix reader header on very narrow screens like the Samsung Fold

packages/web/components/patterns/HighlightView.tsx

@@ -115,8 +115,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             css={{
               '*': {
                 m: '0px',
-                display: 'inline',
-                padding: '2px',
                 backgroundColor: `rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
                 boxShadow: `3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha}), -3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
                 boxDecorationBreak: 'clone',

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} />