@commonpub/layer 0.21.16 → 0.21.18

package/components/views/ProjectView.vue

@@ -432,7 +432,7 @@ async function handleBuild(): Promise<void> {
 
     <!-- MAIN CONTENT GRID -->
     <div class="cpub-page-outer">
-      <div class="cpub-content-grid" :class="{ 'cpub-has-toc': tocEntries.length > 0 && activeTab === 'overview', 'cpub-has-sidebar': hasSidebar }">
+      <div class="cpub-project-grid" :class="{ 'cpub-has-toc': tocEntries.length > 0 && activeTab === 'overview', 'cpub-has-sidebar': hasSidebar }">
         <!-- LEFT: TABLE OF CONTENTS -->
         <nav v-if="tocEntries.length > 0 && activeTab === 'overview'" class="cpub-toc-col">
           <div class="cpub-toc">
@@ -964,20 +964,20 @@ async function handleBuild(): Promise<void> {
    The sidebar 260px column is reserved ONLY when there's sidebar
    content to put in it (BOM/parts OR community hub) — otherwise the
    content column gets the freed width. */
-.cpub-content-grid {
+.cpub-project-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: clamp(16px, 3vw, 32px);
   align-items: start;
   padding-bottom: 64px;
 }
-.cpub-content-grid.cpub-has-toc {
+.cpub-project-grid.cpub-has-toc {
   grid-template-columns: 200px minmax(0, 1fr);
 }
-.cpub-content-grid.cpub-has-sidebar {
+.cpub-project-grid.cpub-has-sidebar {
   grid-template-columns: minmax(0, 1fr) 260px;
 }
-.cpub-content-grid.cpub-has-toc.cpub-has-sidebar {
+.cpub-project-grid.cpub-has-toc.cpub-has-sidebar {
   grid-template-columns: 200px minmax(0, 1fr) 260px;
 }
 
@@ -1010,13 +1010,30 @@ async function handleBuild(): Promise<void> {
   word-break: break-word;
 }
 
-/* Prevent images and media from overflowing prose */
+/* Prevent images and media from overflowing prose, AND cap them at a
+   reading-friendly size in wide content columns. Without this cap, body
+   images blew up to 900px+ once the right sidebar was made optional in
+   0.21.16 (the content column got wider when no BOM/community). 760px
+   for images matches what photographers + technical-writing layouts
+   converge on; videos/iframes get a touch more (880px) for visibility.
+   Cover photo lives OUTSIDE .cpub-prose so it still goes full-width. */
 .cpub-prose :deep(img),
 .cpub-prose :deep(video),
 .cpub-prose :deep(iframe) {
   max-width: 100%;
   height: auto;
 }
+.cpub-prose :deep(img) {
+  max-width: min(100%, 760px);
+  margin-inline: auto;
+  display: block;
+}
+.cpub-prose :deep(video),
+.cpub-prose :deep(iframe) {
+  max-width: min(100%, 880px);
+  margin-inline: auto;
+  display: block;
+}
 
 /* Code blocks scroll horizontally instead of overflowing */
 .cpub-prose :deep(pre) {
@@ -1592,10 +1609,10 @@ async function handleBuild(): Promise<void> {
 
 /* 1200px: Drop left TOC column, keep sidebar if it exists */
 @media (max-width: 1200px) {
-  .cpub-content-grid.cpub-has-toc {
+  .cpub-project-grid.cpub-has-toc {
     grid-template-columns: minmax(0, 1fr);
   }
-  .cpub-content-grid.cpub-has-toc.cpub-has-sidebar {
+  .cpub-project-grid.cpub-has-toc.cpub-has-sidebar {
     grid-template-columns: minmax(0, 1fr) 260px;
   }
   .cpub-toc-col { display: none; }
@@ -1603,10 +1620,10 @@ async function handleBuild(): Promise<void> {
 
 /* 1024px: Single column — sidebar stacks below content */
 @media (max-width: 1024px) {
-  .cpub-content-grid,
-  .cpub-content-grid.cpub-has-toc,
-  .cpub-content-grid.cpub-has-sidebar,
-  .cpub-content-grid.cpub-has-toc.cpub-has-sidebar {
+  .cpub-project-grid,
+  .cpub-project-grid.cpub-has-toc,
+  .cpub-project-grid.cpub-has-sidebar,
+  .cpub-project-grid.cpub-has-toc.cpub-has-sidebar {
     grid-template-columns: minmax(0, 1fr);
   }
   .cpub-sidebar { position: static; }
@@ -1627,7 +1644,7 @@ async function handleBuild(): Promise<void> {
   .cpub-sidebar { position: static; }
   .cpub-author-tags .cpub-author-tag { padding: 2px 8px; font-size: 10px; }
   .cpub-author-row { flex-wrap: wrap; gap: 8px; }
-  .cpub-content-grid { padding-bottom: 32px; }
+  .cpub-project-grid { padding-bottom: 32px; }
 }
 
 /* 480px: Phone — compact everything */
@@ -1641,6 +1658,6 @@ async function handleBuild(): Promise<void> {
   .cpub-engage-btn { font-size: 11px; padding: 8px 10px; }
   .cpub-author-detail { font-size: 10px; }
   .cpub-toc-item { padding: 6px 0 6px 10px; font-size: 11px; min-height: 36px; display: flex; align-items: center; }
-  .cpub-content-grid { gap: 12px; padding-bottom: 24px; }
+  .cpub-project-grid { gap: 12px; padding-bottom: 24px; }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.16",
+  "version": "0.21.18",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,15 +51,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.6.0",
-    "@commonpub/docs": "0.6.3",
-    "@commonpub/editor": "0.7.10",
+    "@commonpub/config": "0.13.0",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/protocol": "0.12.0",
     "@commonpub/server": "2.55.0",
-    "@commonpub/ui": "0.8.5",
+    "@commonpub/protocol": "0.12.0",
     "@commonpub/schema": "0.16.0",
-    "@commonpub/config": "0.13.0"
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/editor": "0.7.10",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",