fix mobile layout

Author: davemooreuws

src/app/[[...slug]]/layout.tsx

@@ -25,8 +25,8 @@ export default function DocLayout({
 
   return (
     <article className="mx-auto flex h-full max-w-7xl flex-col gap-y-10 px-4 pb-10 pt-16">
-      <div className="relative grid grid-cols-12 gap-10">
-        <div className="col-span-12 w-full flex-auto space-y-20 md:col-span-9">
+      <div className="relative grid grid-cols-1 gap-10 md:grid-cols-12">
+        <div className="w-full flex-auto space-y-20 md:col-span-9">
           <div>
             <Breadcrumbs doc={doc} className="mb-4" />
             <Prose>{children}</Prose>

src/components/layout/DocToC.tsx

@@ -26,8 +26,8 @@ const DocToC: React.FC<Props> = ({ doc }) => {
   const articleRef = useRef<HTMLDivElement>(null)
 
   return (
-    <div className="h-full min-w-52" ref={articleRef}>
-      <aside className="sticky top-[calc(var(--header-height)+1px+2rem)] hidden max-h-[calc(100vh-var(--header-height)-3rem)] min-w-40 space-y-6 md:block">
+    <div className="hidden h-full min-w-52 md:block" ref={articleRef}>
+      <aside className="sticky top-[calc(var(--header-height)+1px+2rem)] max-h-[calc(100vh-var(--header-height)-3rem)] min-w-40 space-y-6">
         {doc.toc.length ? (
           <div className="relative flex flex-col">
             <p className="mb-2 font-mono text-sm uppercase dark:text-zinc-300">