QA requests

app/components/ArticlesDropdown/index.tsx

@@ -6,6 +6,7 @@ import {sortFuncs} from '~/routes/tags.$'
 import {questionUrl, tagsUrl, tagUrl} from '~/routesMapper'
 import Button from '~/components/Button'
 import './dropdown.css'
+import useIsMobile from '~/hooks/isMobile'
 
 export type ArticlesDropdownProps = {
   toc: TOCItem[]
@@ -20,7 +21,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
   const [shown, setShown] = useState(false)
   const hide = () => setShown(true)
   useEffect(() => setShown(false), [shown])
-
+  const mobile = useIsMobile()
   const Link = ({to, text, className}: {to: string; text: string; className?: string}) => (
     <div className={'articles-dropdown-entry ' + (className || '')}>
       <LinkElem to={to} onClick={hide}>
@@ -51,8 +52,16 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
   return shown ? null : (
     <div className="articles-dropdown-container bordered col-8">
       <div>
-        <ArticlesSection category={INTRODUCTORY} toc={toc} className="padding-bottom-32" />
-        <ArticlesSection category={ADVANCED} toc={toc} />
+        <ArticlesSection
+          category={INTRODUCTORY}
+          toc={toc}
+          className={mobile ? 'padding-bottom-40' : 'padding-bottom-32'}
+        />
+        <ArticlesSection
+          category={ADVANCED}
+          toc={toc}
+          className={mobile ? 'padding-bottom-40' : ''}
+        />
       </div>
 
       <div>
@@ -66,7 +75,10 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
             <Link key={tag.rowId} className="teal-500" to={tagUrl(tag)} text={tag.name} />
           ))}
 
-        <Button action={tagsUrl()} className="secondary">
+        <Button
+          action={tagsUrl()}
+          className={['secondary', mobile ? 'margin-top-40' : ''].join(' ')}
+        >
           <span onClick={hide}> Browse all categories</span>
         </Button>
       </div>

app/components/Nav/Mobile/index.tsx

@@ -26,7 +26,7 @@ export const MobileNav = ({toc, categories}: NavProps) => {
     setShowSearch(!showSearch)
   }
   return (
-    <header className="top-header">
+    <header className={['top-header', showArticles || showMenu ? 'expanded' : ''].join(' ')}>
       {!showArticles && (
         <>
           <nav className="top-nav">

app/components/Nav/Mobile/navMobile.css

@@ -24,6 +24,7 @@
   }
   .mobile-menu > .button {
     border-radius: 0;
+    padding: var(--spacing-80) var(--spacing-16);
   }
   .mobile-menu > .button:first-child {
     border-bottom: 0;
@@ -87,4 +88,12 @@
   .mobile-searchbar > div {
     width: 100%;
   }
+  .expanded {
+    position: fixed;
+    z-index: 100;
+    height: 100vh;
+    width: 100vw;
+    background: var(--colors-cool-grey-100);
+    overflow: scroll;
+  }
 }

app/newRoot.css

@@ -529,3 +529,10 @@ ol {
     flex-direction: column;
   }
 } /* end mobile */
+p,
+button {
+  font-family: Poppins;
+}
+.margin-top-40 {
+  margin-top: var(--spacing-40);
+}