prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
Fix reader header on very narrow screens like the Samsung Fold
This commit is contained in:
Jackson Harper 2023-07-01 00:34:27 +08:00 committed by GitHub
commit fc15a0a6b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/components/patterns/HighlightView.tsx
View file

@ -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',

6
packages/web/components/templates/reader/ReaderHeader.tsx
View file

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