Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2450 from omnivore-app/fix/web-small-screen-header

Browse Source 
Improve the header on very small screens
This commit is contained in:
Jackson Harper
2023-06-30 12:05:09 -07:00
committed by GitHub
parent fc15a0a6b4 8cd541f665
commit c99e8a377c
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/web/components/templates/article/VerticalArticleActions.tsx
View File

@ -43,6 +43,9 @@ export function VerticalArticleActionsMenu(
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<Tag size={24} color={theme.colors.thHighContrast.toString()} />
@ -54,6 +57,9 @@ export function VerticalArticleActionsMenu(
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<TooltipWrapped
@ -114,6 +120,9 @@ export function VerticalArticleActionsMenu(
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<TooltipWrapped
@ -133,6 +142,9 @@ export function VerticalArticleActionsMenu(
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<TooltipWrapped
@ -149,6 +161,9 @@ export function VerticalArticleActionsMenu(
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<TooltipWrapped

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

@ -65,9 +65,6 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
display: props.alwaysDisplayToolbar ? 'flex' : 'none',
},
'@mdDown': { px: '15px' },
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
{props.children}
@ -79,9 +76,6 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
'@lgDown': {
display: 'none',
},
'@media (max-width: 300px)': {
display: 'flex',
},
}}
>
<ControlButtonBox {...props} />