jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-22 11:26:57 -05:00
Code Issues Projects Releases Wiki Activity

Min-width all the things (#37850)

Browse Source
This commit is contained in:
Kevin Heis
2023-06-15 08:19:10 -07:00
committed by GitHub
parent 80cd66b787
commit 3c99d06192
3 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/ui/MarkdownContent/stylesheets/table.scss
View File

@@ -6,18 +6,19 @@
font-size: 90%; font-size: 90%;
width: 100%; width: 100%;
line-height: 1.5; line-height: 1.5;
/* We want to keep table-layout: auto so that column widths dynamically adjust;
otherwise entries get needlessly squashed into narrow columns. As a workaround,
we use components/lib/wrap-code-terms.js to prevent some reference table content
from expanding beyond the horizontal boundaries of the parent element. */
table-layout: auto;
/* For mobile (small viewports) we need to fix the table because if the table // For mobile (small viewports) we need to fix the table
is larger than the viewport it will force the width of the table causing issues // because if the table is larger than the viewport
with the header on scroll // it will force the width of the table causing issues
*/ // with the header on scroll
@media (max-width: 544px) {
table-layout: fixed; table-layout: fixed;
// We want to keep table-layout: auto so that column widths dynamically adjust;
// otherwise entries get needlessly squashed into narrow columns. As a workaround,
// we use components/lib/wrap-code-terms.js to prevent some reference table content
// from expanding beyond the horizontal boundaries of the parent element.
@media (min-width: 544px) {
table-layout: auto;
} }
code { code {

4
src/search/components/Search.tsx
View File

@@ -14,7 +14,7 @@ export function Search() {
const [localQuery, setLocalQuery] = useState(query) const [localQuery, setLocalQuery] = useState(query)
const { t } = useTranslation('search') const { t } = useTranslation('search')
const { currentVersion } = useVersion() const { currentVersion } = useVersion()
const upToMediumViewport = useBreakpoint('medium') const atMediumViewport = useBreakpoint('medium')
function redirectSearch() { function redirectSearch() {
let asPath = `/${router.locale}` let asPath = `/${router.locale}`
@@ -57,7 +57,7 @@ export function Search() {
onInput={(e) => (e.target as HTMLInputElement).setCustomValidity('')} onInput={(e) => (e.target as HTMLInputElement).setCustomValidity('')}
data-testid="site-search-input" data-testid="site-search-input"
// This adds focus in particular for iOS to focus and bring up the keyboard when you touch the search input text area // This adds focus in particular for iOS to focus and bring up the keyboard when you touch the search input text area
ref={(inputRef) => upToMediumViewport && inputRef && inputRef.focus()} ref={(inputRef) => !atMediumViewport && inputRef && inputRef.focus()}
type="search" type="search"
placeholder={t`placeholder`} placeholder={t`placeholder`}
autoComplete={localQuery ? 'on' : 'off'} autoComplete={localQuery ? 'on' : 'off'}

2
src/search/components/useBreakpoint.ts
View File

@@ -5,5 +5,5 @@ import { useMediaQuery } from './useMediaQuery'
type Size = 'small' | 'medium' | 'large' | 'xlarge' type Size = 'small' | 'medium' | 'large' | 'xlarge'
export function useBreakpoint(size: Size) { export function useBreakpoint(size: Size) {
const { theme } = useTheme() const { theme } = useTheme()
return useMediaQuery(`(max-width: ${theme?.sizes[size]})`) return useMediaQuery(`(min-width: ${theme?.sizes[size]})`)
} }