@commonpub/layer 0.39.0 → 0.41.0

package/components/homepage/ContentGridSection.vue

@@ -124,25 +124,17 @@ const columns = computed(() => props.config.columns ?? 2);
 .cpub-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
 
 /*
- * Session 164 polish: cap the grid's max width so cards don't stretch
- * into a "giant cards in mobile layout" pattern at desktop widths.
- *
- * Was: `grid-template-columns: repeat(2, 1fr)` with NO width cap → at
- * 1440px window, 2 columns of ~700px each. Cards stretched far past
- * their natural design width and read as "single column of bigs".
- *
- * Now: same column behavior but bounded by --content-max-width (default
- * 1280px) — matches the tabs-inner cap above (same theme token). At
- * 1280px and below, behaves identically to before. Above, the grid
- * stays at 1280 centered and cards stay at their design proportions.
- *
- * `var(--grid-cols)` config still drives column count. Mobile drops to
- * 1-column at <=768px (unchanged).
+ * Responsive card grid: auto-fill columns at a fixed min-width so cards stay
+ * a single, consistent size everywhere (the `--cpub-card-min`/`--cpub-card-gap`
+ * tokens — see packages/ui/theme/base.css). The old `repeat(var(--grid-cols),
+ * 1fr)` stretched 2 columns to ~470px each ("giant cards"); auto-fill keeps
+ * cards at their design width and simply fits as many as the row allows.
+ * Bounded by --content-max-width and centered.
  */
 .cpub-content-grid {
   display: grid;
-  grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
   max-width: var(--content-max-width, 1280px);
   margin-inline: auto;
 }
@@ -151,5 +143,5 @@ const columns = computed(() => props.config.columns ?? 2);
 .cpub-btn-load-more { font-family: var(--font-mono); font-size: 11px; padding: 8px 20px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
 .cpub-btn-load-more:hover { border-color: var(--accent); color: var(--accent); }
 
-@media (max-width: 768px) { .cpub-content-grid { grid-template-columns: 1fr; } }
+@media (max-width: 640px) { .cpub-content-grid { grid-template-columns: 1fr; } }
 </style>

package/components/homepage/EditorialSection.vue

@@ -26,7 +26,7 @@ const { data: editorialPicks } = await useFetch<PaginatedResponse<Serialized<Con
 .cpub-editorial-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
 .cpub-editorial-heading { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 6px; }
 .cpub-editorial-heading i { font-size: 10px; }
-.cpub-editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.cpub-editorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr)); gap: var(--cpub-card-gap, 20px); }
 .cpub-editorial-single { grid-template-columns: 1fr; max-width: 400px; }
 @media (max-width: 768px) { .cpub-editorial-grid { grid-template-columns: 1fr; } }
 </style>

package/components/hub/HubProjects.vue

@@ -105,8 +105,8 @@ async function shareProjectToHub(contentId: string): Promise<void> {
 <style scoped>
 .cpub-gallery-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 
 /* Modal */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,15 +54,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.7.0",
-    "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.16.0",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/editor": "0.7.11",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/protocol": "0.12.0",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/schema": "0.24.0",
     "@commonpub/ui": "0.9.1",
-    "@commonpub/server": "2.67.0"
+    "@commonpub/protocol": "0.12.0",
+    "@commonpub/server": "2.69.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/index.vue

@@ -111,8 +111,8 @@ const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentLis
 
 .cpub-listing-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: var(--space-4);
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 
 .cpub-listing-empty {

package/pages/explore.vue

@@ -461,8 +461,8 @@ const sortOptions = [
    2-col hub/people grid ≈ 470px each) that didn't adapt to the container. */
 .cpub-explore-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 
 /* Hub cards (horizontal layout — slightly wider min) */

package/pages/federated-hubs/[id]/index.vue

@@ -556,8 +556,8 @@ async function handlePostVote(postId: string): Promise<void> {
 .cpub-hub-projects-tab { padding: 0; }
 .cpub-shared-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 .cpub-shared-card {
   background: var(--surface); border: var(--border-width-default) solid var(--border);

package/pages/feed.vue

@@ -111,7 +111,7 @@ const filters = computed(() => [
 .feed-filter.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
 .feed-filter i { font-size: 10px; }
 
-.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
+.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr)); gap: var(--cpub-card-gap, 20px); }
 
 .feed-loading { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; }
 

package/pages/index.vue

@@ -720,8 +720,8 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 
 .cpub-editorial-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 
 .cpub-editorial-single {
@@ -906,8 +906,8 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 /* ─── CONTENT GRID ─── */
 .cpub-content-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 18px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
   margin-bottom: 24px;
 }
 

package/pages/products/[slug].vue

@@ -113,7 +113,7 @@ useSeoMeta({
 .product-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); }
 .product-link-btn:hover { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); }
 
-.product-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+.product-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr)); gap: var(--cpub-card-gap, 20px); }
 .product-projects-empty { color: var(--text-faint); font-size: 13px; padding: 24px 0; }
 
 .product-sidebar { display: flex; flex-direction: column; gap: 16px; }

package/pages/search.vue

@@ -711,8 +711,8 @@ const { data: relatedCommunities } = await useFetch('/api/hubs', {
 /* ── RESULTS GRID ── */
 .cpub-results-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
   margin-bottom: 32px;
 }
 

package/pages/tags/[slug].vue

@@ -121,8 +121,8 @@ async function loadMore(): Promise<void> {
 
 .cpub-tag-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 
 .cpub-tag-more {

package/pages/u/[username]/[type]/[slug]/index.vue

@@ -295,8 +295,8 @@ onMounted(() => {
 
 .cpub-view-related-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-4);
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 
 .cpub-not-found {

package/pages/u/[username]/index.vue

@@ -825,8 +825,8 @@ async function handleReport(): Promise<void> {
 /* Grid */
 .cpub-grid-3 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-card-min, 260px), 1fr));
+  gap: var(--cpub-card-gap, 20px);
 }
 
 .cpub-dropdown {

package/theme/base.css

@@ -222,6 +222,15 @@
   --content-max-width: 60rem; /* 960px */
   --content-wide-max-width: 75rem;
 
+  /* === CONTENT-CARD GRID ===
+     Every grid that lays out <ContentCard> draws its column min-width + gap
+     from these tokens so cards are a single, consistent size everywhere they
+     appear (home feed, listing pages, search, explore, profiles, hubs…).
+     Default values match deveco.io's responsive card grid. Instances retune
+     by overriding these tokens in their theme CSS — no per-view edits. */
+  --cpub-card-min: 260px;  /* min column width before wrapping (auto-fill) */
+  --cpub-card-gap: 20px;   /* gutter between cards */
+
   /* === FOCUS === */
   --focus-ring: var(--shadow-accent);
 }