jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-19 18:10:59 -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%;
width: 100%;
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
is larger than the viewport it will force the width of the table causing issues
with the header on scroll
*/
@media (max-width: 544px) {
// For mobile (small viewports) we need to fix the table
// because if the table is larger than the viewport
// it will force the width of the table causing issues
// with the header on scroll
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 {

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

@@ -14,7 +14,7 @@ export function Search() {
const [localQuery, setLocalQuery] = useState(query)
const { t } = useTranslation('search')
const { currentVersion } = useVersion()
const upToMediumViewport = useBreakpoint('medium')
const atMediumViewport = useBreakpoint('medium')
function redirectSearch() {
let asPath = `/${router.locale}`
@@ -57,7 +57,7 @@ export function Search() {
onInput={(e) => (e.target as HTMLInputElement).setCustomValidity('')}
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
ref={(inputRef) => upToMediumViewport && inputRef && inputRef.focus()}
ref={(inputRef) => !atMediumViewport && inputRef && inputRef.focus()}
type="search"
placeholder={t`placeholder`}
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'
export function useBreakpoint(size: Size) {
const { theme } = useTheme()
return useMediaQuery(`(max-width: ${theme?.sizes[size]})`)
return useMediaQuery(`(min-width: ${theme?.sizes[size]})`)
}