@commonpub/layer 0.7.16 → 0.7.18

package/components/views/ArticleView.vue

@@ -317,10 +317,14 @@ useJsonLd({
 }
 
 /* ── ARTICLE WRAP ── */
+.cpub-article-view {
+  overflow-x: clip;
+}
+
 .cpub-article-wrap {
   max-width: 720px;
   margin: 0 auto;
-  padding: 40px 24px 80px;
+  padding: 40px clamp(12px, 4vw, 24px) 80px;
 }
 
 /* ── TYPE BADGE ── */
@@ -771,23 +775,27 @@ useJsonLd({
   gap: 6px;
 }
 
+/* Global overflow protection for content */
+.cpub-article-wrap :deep(img),
+.cpub-article-wrap :deep(video),
+.cpub-article-wrap :deep(iframe) { max-width: 100%; height: auto; }
+.cpub-article-wrap :deep(pre) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.cpub-article-wrap { overflow-wrap: break-word; word-break: break-word; }
+
 /* ── COVER PHOTO (in-body) ── */
 .cpub-cover-photo {
   margin-bottom: 24px;
-  border: var(--border-width-default) solid var(--border);
-  overflow: hidden;
 }
 .cpub-cover-photo-img {
-  max-width: 100%;
-  max-height: 500px;
+  width: 100%;
   height: auto;
   display: block;
-  margin: 0 auto;
+  border-radius: var(--radius, 0);
 }
 
 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {
-  .cpub-article-wrap { padding: 24px 16px 48px; }
+  .cpub-article-wrap { padding-top: 24px; padding-bottom: 48px; }
   .cpub-article-title { font-size: 22px; }
   .cpub-article-lead { font-size: 14px; margin-bottom: 16px; }
   .cpub-related-grid { grid-template-columns: 1fr 1fr; }
@@ -798,7 +806,7 @@ useJsonLd({
 }
 
 @media (max-width: 480px) {
-  .cpub-article-wrap { padding: 16px 12px 40px; }
+  .cpub-article-wrap { padding-top: 16px; padding-bottom: 40px; }
   .cpub-article-title { font-size: 20px; }
   .cpub-article-lead { font-size: 13px; }
   .cpub-related-grid { grid-template-columns: 1fr; }

package/components/views/BlogView.vue

@@ -216,12 +216,24 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 }
 
 /* ── BLOG WRAP ── */
+.cpub-blog-view {
+  overflow-x: clip;
+}
+
 .cpub-blog-wrap {
   max-width: 720px;
   margin: 0 auto;
-  padding: 40px 24px 80px;
+  padding: 40px clamp(12px, 4vw, 24px) 80px;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
+/* Global overflow protection for content */
+.cpub-blog-wrap :deep(img),
+.cpub-blog-wrap :deep(video),
+.cpub-blog-wrap :deep(iframe) { max-width: 100%; height: auto; }
+.cpub-blog-wrap :deep(pre) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+
 /* ── TYPE BADGE ── */
 .cpub-content-type-badge {
   display: inline-flex;
@@ -334,15 +346,12 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 /* ── COVER PHOTO (in-body) ── */
 .cpub-cover-photo {
   margin-bottom: 24px;
-  border: var(--border-width-default) solid var(--border);
-  overflow: hidden;
 }
 .cpub-cover-photo-img {
-  max-width: 100%;
-  max-height: 500px;
+  width: 100%;
   height: auto;
   display: block;
-  margin: 0 auto;
+  border-radius: var(--radius, 0);
 }
 
 /* ── ENGAGEMENT ROW ── */
@@ -705,7 +714,7 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 
 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {
-  .cpub-blog-wrap { padding: 24px 16px 48px; }
+  .cpub-blog-wrap { padding-top: 24px; padding-bottom: 48px; }
   .cpub-blog-title { font-size: 22px; }
   .cpub-engagement-row { flex-wrap: wrap; gap: 6px; }
   .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
@@ -716,7 +725,7 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 }
 
 @media (max-width: 480px) {
-  .cpub-blog-wrap { padding: 16px 12px 40px; }
+  .cpub-blog-wrap { padding-top: 16px; padding-bottom: 40px; }
   .cpub-blog-title { font-size: 20px; }
   .cpub-blog-lead { font-size: 13px; }
   .cpub-author-card { flex-direction: column; gap: 12px; }

package/components/views/ProjectView.vue

@@ -590,6 +590,11 @@ async function handleBuild(): Promise<void> {
 
 <style scoped>
 /* ── HERO COVER ── */
+.cpub-project-view {
+  /* Prevent any child from creating horizontal scroll */
+  overflow-x: clip;
+}
+
 .cpub-hero-cover {
   position: relative;
   height: 280px;
@@ -675,7 +680,7 @@ async function handleBuild(): Promise<void> {
 .cpub-page-outer {
   max-width: 1160px;
   margin: 0 auto;
-  padding: 0 32px;
+  padding: 0 clamp(12px, 3vw, 32px);
 }
 
 /* ── BREADCRUMB ── */
@@ -920,28 +925,33 @@ async function handleBuild(): Promise<void> {
 /* ── CONTENT GRID ── */
 .cpub-content-grid {
   display: grid;
-  grid-template-columns: 1fr 260px;
-  gap: 32px;
+  grid-template-columns: minmax(0, 1fr) 260px;
+  gap: clamp(16px, 3vw, 32px);
   align-items: start;
   padding-bottom: 64px;
 }
 .cpub-content-grid.cpub-has-toc {
-  grid-template-columns: 200px 1fr 260px;
+  grid-template-columns: 200px minmax(0, 1fr) 260px;
+}
+
+/* Prevent grid children from overflowing */
+.cpub-content-col,
+.cpub-sidebar,
+.cpub-toc-col {
+  min-width: 0;
+  overflow-wrap: break-word;
 }
 
 /* ── COVER PHOTO (in-body) ── */
 .cpub-cover-photo {
   margin-bottom: 24px;
-  border: var(--border-width-default) solid var(--border);
-  overflow: hidden;
 }
 
 .cpub-cover-photo-img {
-  max-width: 100%;
-  max-height: 500px;
+  width: 100%;
   height: auto;
   display: block;
-  margin: 0 auto;
+  border-radius: var(--radius, 0);
 }
 
 /* ── PROSE ── */
@@ -949,6 +959,22 @@ async function handleBuild(): Promise<void> {
   font-size: 13px;
   line-height: 1.8;
   color: var(--text-dim);
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Prevent images and media from overflowing prose */
+.cpub-prose :deep(img),
+.cpub-prose :deep(video),
+.cpub-prose :deep(iframe) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Code blocks scroll horizontally instead of overflowing */
+.cpub-prose :deep(pre) {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .cpub-prose :deep(h2),
@@ -1516,48 +1542,53 @@ async function handleBuild(): Promise<void> {
 }
 
 /* ── RESPONSIVE ── */
+
+/* 1200px: Drop left TOC column, keep sidebar */
 @media (max-width: 1200px) {
   .cpub-content-grid.cpub-has-toc {
-    grid-template-columns: 1fr 260px;
+    grid-template-columns: minmax(0, 1fr) 260px;
   }
   .cpub-toc-col { display: none; }
 }
+
+/* 1024px: Single column — sidebar stacks below content */
 @media (max-width: 1024px) {
   .cpub-content-grid,
   .cpub-content-grid.cpub-has-toc {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
   .cpub-sidebar { position: static; }
   .cpub-toc-col { display: none; }
 }
 
+/* 768px: Tablet — reduce sizes, wrap engagement, scroll tabs */
 @media (max-width: 768px) {
-  .cpub-page-outer { padding: 0 16px; }
   .cpub-hero-cover { height: 200px; }
   .cpub-project-title { font-size: 18px; }
   .cpub-project-desc { font-size: 13px; }
-  .cpub-tabs-strip { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
-  .cpub-tabs-inner { max-width: none; padding: 0; }
+  .cpub-tabs-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .cpub-tabs-inner { max-width: none; padding: 0 clamp(12px, 3vw, 32px); }
   .cpub-tab { padding: 10px 12px; font-size: 11px; white-space: nowrap; }
   .cpub-engagement-row { flex-wrap: wrap; gap: 6px; }
   .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
   .cpub-engage-sep { display: none; }
-  .cpub-content-area { padding: 0 16px; }
   .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; }
 }
 
+/* 480px: Phone — compact everything */
 @media (max-width: 480px) {
-  .cpub-page-outer { padding: 0 12px; }
   .cpub-hero-cover { height: 160px; }
   .cpub-project-title { font-size: 16px; }
   .cpub-project-desc { font-size: 12px; line-height: 1.5; }
-  .cpub-project-meta { padding: 16px 0 0; }
-  .cpub-breadcrumbs { font-size: 10px; padding: 10px 0 8px; }
+  .cpub-project-meta { padding: 12px 0 0; }
+  .cpub-breadcrumb { font-size: 10px; padding: 10px 0 8px; }
   .cpub-tab { padding: 8px 10px; font-size: 10px; }
   .cpub-engage-btn { font-size: 11px; padding: 8px 10px; }
-  .cpub-author-row { gap: 8px; }
   .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; }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.16",
+  "version": "0.7.18",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/editor": "0.7.5",
-    "@commonpub/docs": "0.6.2",
-    "@commonpub/learning": "0.5.0",
     "@commonpub/config": "0.9.0",
-    "@commonpub/server": "2.27.7",
+    "@commonpub/auth": "0.5.0",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/explainer": "0.7.6",
-    "@commonpub/ui": "0.8.5",
+    "@commonpub/schema": "0.9.5",
     "@commonpub/protocol": "0.9.7",
-    "@commonpub/schema": "0.9.5"
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/server": "2.27.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",