diff --git a/components/ui/MarkdownContent/stylesheets/table.scss b/components/ui/MarkdownContent/stylesheets/table.scss
index 8f4aab4410..142bb1b286 100644
--- a/components/ui/MarkdownContent/stylesheets/table.scss
+++ b/components/ui/MarkdownContent/stylesheets/table.scss
@@ -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) {
-      table-layout: fixed;
+    // 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 {
diff --git a/src/search/components/Search.tsx b/src/search/components/Search.tsx
index 8a60d1b1b8..d34ce17971 100644
--- a/src/search/components/Search.tsx
+++ b/src/search/components/Search.tsx
@@ -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'}
diff --git a/src/search/components/useBreakpoint.ts b/src/search/components/useBreakpoint.ts
index 849378c5b4..2993646c41 100644
--- a/src/search/components/useBreakpoint.ts
+++ b/src/search/components/useBreakpoint.ts
@@ -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]})`)
 }