Codex fixes

components/mdx/MobileTableOfContents.tsx

@@ -8,16 +8,16 @@ export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
     if (headings.length === 0) return null;
 
     return (
-        <details className="mb-8 border-y border-line py-4">
-            <summary className="eyebrow cursor-pointer list-none">
-                Contents
+        <details className="group mb-8 border-y border-line py-4">
+            <summary className="flex cursor-pointer list-none items-center justify-between gap-4">
+                <span className="eyebrow">Contents</span>
+                <span aria-hidden className="text-base leading-none text-muted-strong transition-transform group-open:rotate-45">
+                    +
+                </span>
             </summary>
             <ul className="mt-4 space-y-2">
                 {headings.map((heading) => (
-                    <li
-                        key={heading.id}
-                        style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
-                    >
+                    <li key={heading.id} className={heading.level > 2 ? 'pl-4' : undefined}>
                         <a
                             href={`#${heading.id}`}
                             className="block text-[0.94rem] leading-7 text-muted transition-colors hover:text-ink"