diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index 2bcff40f6..3bd6a497b 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/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',
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} />