layout redesign

frontend/src/components/react/admin/Editor.tsx

@@ -86,6 +86,7 @@ export default function Editor({ editSlug }: Props) {
   const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
   const [showModal, setShowModal] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
+  const [mobileView, setMobileView] = useState<'edit' | 'preview'>('edit');
   const [vimEnabled, setVimEnabled] = useState(() =>
     typeof window !== 'undefined' && window.innerWidth > 768
   );
@@ -423,10 +424,46 @@ export default function Editor({ editSlug }: Props) {
           </div>
         </div>
 
-        {/* Editor + Preview — both columns stretch to the taller one */}
-        <div className={`relative ${showPreview ? 'grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch' : ''}`}>
-          <div className="relative min-h-[500px]" style={showPreview ? { display: 'flex', flexDirection: 'column' } : undefined}>
-            <div ref={editorRef} style={showPreview ? { flex: '1 1 0', minHeight: 0 } : undefined} className={showPreview ? '' : 'min-h-[500px]'} />
+        {/* Mobile-only Edit | Preview tab bar */}
+        {showPreview && (
+          <div className="md:hidden flex gap-2" role="tablist" aria-label="Editor view">
+            <button
+              type="button"
+              role="tab"
+              aria-selected={mobileView === 'edit'}
+              onClick={() => setMobileView('edit')}
+              className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
+                mobileView === 'edit'
+                  ? 'bg-blue/20 text-blue border-blue/30'
+                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+              }`}
+            >
+              Edit
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={mobileView === 'preview'}
+              onClick={() => setMobileView('preview')}
+              className={`flex-1 text-xs px-3 py-2 rounded border transition-colors ${
+                mobileView === 'preview'
+                  ? 'bg-blue/20 text-blue border-blue/30'
+                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+              }`}
+            >
+              Preview
+            </button>
+          </div>
+        )}
+
+        {/* Editor + Preview — desktop side-by-side, mobile single-pane via tabs */}
+        <div className={`relative ${showPreview ? 'md:grid md:grid-cols-2 md:gap-4 md:items-stretch' : ''}`}>
+          <div
+            className={`relative min-h-[500px] md:flex md:flex-col ${
+              showPreview && mobileView === 'preview' ? 'hidden' : ''
+            }`}
+          >
+            <div ref={editorRef} className="min-h-[500px] md:flex-1 md:min-h-0" />
 
             {/* Autocomplete dropdown */}
             {showAutocomplete && autocompleteAssets.length > 0 && (
@@ -461,9 +498,13 @@ export default function Editor({ editSlug }: Props) {
             )}
           </div>
 
-          {/* Live Preview — stretches to match editor height */}
+          {/* Live Preview — stretches to match editor height on desktop, full-pane via tabs on mobile */}
           {showPreview && (
-            <div className="border border-surface1 rounded-xl bg-crust/50 overflow-y-auto flex flex-col min-h-[500px]">
+            <div
+              className={`border border-surface1 rounded-xl bg-crust/50 overflow-y-auto flex-col md:flex md:min-h-0 ${
+                mobileView === 'preview' ? 'flex min-h-[60vh]' : 'hidden'
+              }`}
+            >
               <div className="sticky top-0 bg-mantle px-4 py-2 text-xs text-subtext0 uppercase border-b border-surface1 z-10">
                 Preview
               </div>