diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index 819d2a3..ae57f03 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 import { useSearchParams } from 'react-router';
 import { useClient } from 'hooks/useClient';
 import { readableError } from '../errors';
@@ -275,37 +275,10 @@ export const LayoutPanel = () => {
     }
 
     setEditorRef.current(
-      <Tabs value={tab} onValueChange={setTab} className="shrink-0 gap-2">
-            <TabsList className="h-7">
-              <TabsTrigger value="colours" className="text-xs">
-                Colours
-              </TabsTrigger>
-              <TabsTrigger value="typefaces" className="text-xs">
-                Typefaces
-              </TabsTrigger>
-              <TabsTrigger value="padding" className="text-xs">
-                Padding
-              </TabsTrigger>
-            </TabsList>
-
-            {/*
-              EVERY panel in the same grid cell, so the block is as tall as the TALLEST of them and stops
-              moving when the tab changes.
-
-              Measuring the panels and setting a height would need a ResizeObserver, a re-measure on every
-              edit, and a wrong answer for one frame after each. `grid-area: 1/1` gets it from the layout
-              engine for nothing, and it stays right when a tab is added or one of them grows a row —
-              which is the case that made the first fix insufficient.
-
-              `invisible` and not `hidden`: an invisible element still takes its space, which IS the
-              mechanism. It is also removed from the tab order, so the controls behind the front panel
-              cannot be reached by keyboard.
-            */}
-            <div className="grid rounded-lg border border-border p-4">
-              <div
-                className={`col-start-1 row-start-1 ${tab === 'colours' ? '' : 'invisible'}`}
-                aria-hidden={tab !== 'colours'}
-              >
+      <Accordion type="multiple" defaultValue={[tab]} className="flex flex-col gap-2">
+        <AccordionItem value="colours" className="rounded-lg border border-border px-4">
+          <AccordionTrigger className="text-xs">Colours</AccordionTrigger>
+          <AccordionContent>
       <>
           <div className="flex flex-wrap gap-4">
             {COLOURS.map(({ key, label, fallback }) => (
@@ -336,12 +309,11 @@ export const LayoutPanel = () => {
             ))}
           </div>
         </>
-              </div>
-
-              <div
-                className={`col-start-1 row-start-1 ${tab === 'typefaces' ? '' : 'invisible'}`}
-                aria-hidden={tab !== 'typefaces'}
-              >
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="typefaces" className="rounded-lg border border-border px-4">
+          <AccordionTrigger className="text-xs">Typefaces</AccordionTrigger>
+          <AccordionContent>
       <>
           {/*
             Four across, one row.
@@ -382,12 +354,11 @@ export const LayoutPanel = () => {
             ))}
           </div>
         </>
-              </div>
-
-              <div
-                className={`col-start-1 row-start-1 ${tab === 'padding' ? '' : 'invisible'}`}
-                aria-hidden={tab !== 'padding'}
-              >
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="padding" className="rounded-lg border border-border px-4">
+          <AccordionTrigger className="text-xs">Padding</AccordionTrigger>
+          <AccordionContent>
                 {/*
                   The site's gutter, not a per-band padding.
 
@@ -404,9 +375,9 @@ export const LayoutPanel = () => {
                   steps={draft.padding_steps}
                   onChange={(padding_x) => patch({ padding_x })}
                 />
-              </div>
-            </div>
-          </Tabs>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     );
   }, [draft, tab, device]);