acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki 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
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/hooks/useWebMediaQueries.tsx
+2 -2
View File
@@ -3,8 +3,8 @@ import {isNative} from 'platform/detection'
export function useWebMediaQueries() { export function useWebMediaQueries() {
const isDesktop = useMediaQuery({minWidth: 1300}) const isDesktop = useMediaQuery({minWidth: 1300})
const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300}) const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300 - 1})
const isMobile = useMediaQuery({maxWidth: 800}) const isMobile = useMediaQuery({maxWidth: 800 - 1})
const isTabletOrMobile = isMobile || isTablet const isTabletOrMobile = isMobile || isTablet
const isTabletOrDesktop = isDesktop || isTablet const isTabletOrDesktop = isDesktop || isTablet
if (isNative) { if (isNative) {
src/view/com/util/layouts/Breakpoints.web.tsx
+3 -3
View File
@@ -8,13 +8,13 @@ export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800}>{children}</MediaQuery> <MediaQuery minWidth={800}>{children}</MediaQuery>
) )
export const Tablet = ({children}: React.PropsWithChildren<{}>) => ( export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800} maxWidth={1300}> <MediaQuery minWidth={800} maxWidth={1300 - 1}>
{children} {children}
</MediaQuery> </MediaQuery>
) )
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => ( export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={1300}>{children}</MediaQuery> <MediaQuery maxWidth={1300 - 1}>{children}</MediaQuery>
) )
export const Mobile = ({children}: React.PropsWithChildren<{}>) => ( export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={800}>{children}</MediaQuery> <MediaQuery maxWidth={800 - 1}>{children}</MediaQuery>
) )