diff --git a/docs/custom.css b/docs/custom.css
index 8ade317b65..74049c59b6 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -1319,3 +1319,18 @@ samp {
     color: #0a2a20 !important;
   }
 }
+
+/* Frame mode (every catalog page) renders no `main#content-container`, so it loses
+ * that element's `px-5 lg:pr-10 lg:pl-[5.5rem]` and sits flush against the sidebar.
+ * These are those same values, nothing new. */
+header.is-frame ~ #body-content #content-area {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+@media (min-width: 1024px) {
+  header.is-frame ~ #body-content #content-area {
+    padding-left: 5.5rem;
+    padding-right: 2.5rem;
+  }
+}
diff --git a/docs/snippets/catalog-detail.jsx b/docs/snippets/catalog-detail.jsx
index 5f42c75ec3..38dc85fea5 100644
--- a/docs/snippets/catalog-detail.jsx
+++ b/docs/snippets/catalog-detail.jsx
@@ -686,10 +686,13 @@ export const CatalogDetail = ({
   padding: 16px;
   border-top: 1px solid var(--ve-line);
 }
-.hf-ve-tabs-row { margin: 20px 0 0 16px; }
+/* No left inset on the tab row or the panes under it: the page gutter is the
+ * page's job, and a second 16px here put everything below the stage on a
+ * different left edge from the title, install block and stage above it. */
+.hf-ve-tabs-row { margin: 20px 0 0; }
 .hf-ve-tabs-row .hf-ve-tab { padding: 6px 16px; font-size: 14px; }
 .hf-ve-tabs-row .hf-ve-tab small { margin-left: 6px; font-weight: 400; opacity: 0.7; }
-.hf-ve-body { padding: 2rem 0 0 16px; }
+.hf-ve-body { padding: 2rem 0 0; }
 .hf-ve-install { margin: 0 0 28px; }
 .hf-ve-install-title { margin: 0 0 12px; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ve-fg); }
 .hf-ve-about h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }