diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index 056126839..0c7c2c1fa 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -127,6 +127,7 @@ import {
   type AgentTerminalDeliveryRecord,
   type AnnotateFeedbackTarget,
 } from './agentTerminalIntegration';
+import { resolveDocumentAreaClassName } from './documentAreaLayout';
 import {
   buildPlanEditPanelItem,
   buildDirectEditsSection,
@@ -3783,6 +3784,13 @@ const App: React.FC = () => {
     agentTerminalCapability !== null &&
     wideModeType === null &&
     (isAgentTerminalOpen || isAgentTerminalRunning);
+  const canShowCollapsedSidebarTabs =
+    wideModeType === null &&
+    !sidebar.isOpen &&
+    !goalSetupMode;
+  const collapsedSidebarTabsStyle = isAgentTerminalOpen
+    ? { left: `var(--agent-terminal-w, ${agentTerminalResize.width}px)` }
+    : undefined;
   // Only greet in a normal authoring context — not on a read-only shared session
   // (a viewer would also be able to flip the owner's gridEnabled), nor over the
   // goal-setup / permission-mode flows. Deferred (not marked seen) until then.
@@ -3979,7 +3987,7 @@ const App: React.FC = () => {
             </div>
           )}
           {/* Left Sidebar: collapsed tab flags (when sidebar is closed) */}
-          {wideModeType === null && !sidebar.isOpen && !goalSetupMode && !isAgentTerminalOpen && (
+          {canShowCollapsedSidebarTabs && (
             <SidebarTabs
               activeTab={sidebar.activeTab}
               onToggleTab={toggleSidebarTab}
@@ -3994,6 +4002,7 @@ const App: React.FC = () => {
               hasMessageAnnotations={activeMessageAnnotationCounts.size > 0}
               hasFileAnnotations={hasFileAnnotations}
               className="hidden lg:flex absolute left-0 top-0 z-20"
+              style={collapsedSidebarTabsStyle}
             />
           )}
 
@@ -4078,7 +4087,11 @@ const App: React.FC = () => {
           {/* Document Area */}
           <OverlayScrollArea
             element="main"
-            className={`flex-1 min-w-0 ${isHtmlSurface ? 'bg-background' : `${gridEnabled ? "bg-grid " : "bg-card "}${!goalSetupMode && !sidebar.isOpen && !isAgentTerminalOpen && wideModeType === null ? 'lg:pl-[30px]' : ''}`}`}
+            className={resolveDocumentAreaClassName({
+              isHtmlSurface,
+              gridEnabled,
+              hasCollapsedSidebarTabs: canShowCollapsedSidebarTabs,
+            })}
             data-print-region="document"
             onViewportReady={handleViewportReady}
           >
diff --git a/packages/editor/documentAreaLayout.test.ts b/packages/editor/documentAreaLayout.test.ts
new file mode 100644
index 000000000..1d550eef1
--- /dev/null
+++ b/packages/editor/documentAreaLayout.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'bun:test';
+import { resolveDocumentAreaClassName } from './documentAreaLayout';
+
+describe('resolveDocumentAreaClassName', () => {
+  test('insets raw HTML when collapsed sidebar shortcuts are visible', () => {
+    expect(resolveDocumentAreaClassName({
+      isHtmlSurface: true,
+      gridEnabled: false,
+      hasCollapsedSidebarTabs: true,
+    })).toBe('flex-1 min-w-0 bg-background lg:pl-[30px]');
+  });
+
+  test('does not inset raw HTML when the shortcuts are hidden', () => {
+    expect(resolveDocumentAreaClassName({
+      isHtmlSurface: true,
+      gridEnabled: false,
+      hasCollapsedSidebarTabs: false,
+    })).toBe('flex-1 min-w-0 bg-background');
+  });
+
+  test('preserves Markdown surface styling with the same shortcut inset', () => {
+    expect(resolveDocumentAreaClassName({
+      isHtmlSurface: false,
+      gridEnabled: true,
+      hasCollapsedSidebarTabs: true,
+    })).toBe('flex-1 min-w-0 bg-grid lg:pl-[30px]');
+
+    expect(resolveDocumentAreaClassName({
+      isHtmlSurface: false,
+      gridEnabled: false,
+      hasCollapsedSidebarTabs: false,
+    })).toBe('flex-1 min-w-0 bg-card');
+  });
+});
diff --git a/packages/editor/documentAreaLayout.tsx b/packages/editor/documentAreaLayout.tsx
new file mode 100644
index 000000000..8e5e89574
--- /dev/null
+++ b/packages/editor/documentAreaLayout.tsx
@@ -0,0 +1,25 @@
+// Keep this as TSX: packages/editor/index.css scans root *.tsx files for the
+// Tailwind utility emitted below.
+
+/**
+ * Resolve the document-area classes while keeping collapsed sidebar shortcuts
+ * outside both Markdown and raw-HTML content.
+ */
+export function resolveDocumentAreaClassName(options: Readonly<{
+  isHtmlSurface: boolean;
+  gridEnabled: boolean;
+  hasCollapsedSidebarTabs: boolean;
+}>): string {
+  const surfaceClass = options.isHtmlSurface
+    ? 'bg-background'
+    : options.gridEnabled
+      ? 'bg-grid'
+      : 'bg-card';
+
+  return [
+    'flex-1',
+    'min-w-0',
+    surfaceClass,
+    options.hasCollapsedSidebarTabs ? 'lg:pl-[30px]' : '',
+  ].filter(Boolean).join(' ');
+}
diff --git a/packages/ui/components/sidebar/SidebarTabs.tsx b/packages/ui/components/sidebar/SidebarTabs.tsx
index 420edec71..3c3d1a9ac 100644
--- a/packages/ui/components/sidebar/SidebarTabs.tsx
+++ b/packages/ui/components/sidebar/SidebarTabs.tsx
@@ -24,6 +24,7 @@ interface SidebarTabsProps {
   hasFileAnnotations?: boolean;
   hasMessageAnnotations?: boolean;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export const SidebarTabs: React.FC<SidebarTabsProps> = ({
@@ -40,11 +41,13 @@ export const SidebarTabs: React.FC<SidebarTabsProps> = ({
   hasFileAnnotations,
   hasMessageAnnotations,
   className,
+  style,
 }) => {
   return (
     <div
       data-sidebar-tabs="true"
       className={`flex flex-col gap-1 pt-3 pl-0.5 flex-shrink-0 ${className ?? ""}`}
+      style={style}
     >
       {showAgentTerminalTab && onToggleAgentTerminal && (
         <button