zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Fix scuffed web styles caused by overlapping viewport breakpoint boundaries (#1985)

Browse source 
* fixed lack of styles on 1300px web viewport width by adjusting tablet breakpoints

* fixed lack of styles on 800px web viewport width by adjusting mobile breakpoints

* changed `maxWidth` values in viewports to `n - 1` format
This commit is contained in:
Cλctys 2023-12-01 01:14:36 +01:00 • committed by GitHub
parent 85b2b390df
commit 5839d2a30c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/view/com/util/layouts/Breakpoints.web.tsx
View file

@ -8,13 +8,13 @@ export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800}>{children}</MediaQuery>
)
export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800} maxWidth={1300}>
<MediaQuery minWidth={800} maxWidth={1300 - 1}>
{children}
</MediaQuery>
)
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={1300}>{children}</MediaQuery>
<MediaQuery maxWidth={1300 - 1}>{children}</MediaQuery>
)
export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={800}>{children}</MediaQuery>
<MediaQuery maxWidth={800 - 1}>{children}</MediaQuery>
)