update

.workbuddy/memory/MEMORY.md

@@ -19,6 +19,15 @@
 - CSS 写法：能用 @apply 就 @apply；`<style>` 顶部加 `@reference "tailwindcss";`。仅保留手写：@keyframes、渐变 shimmer、!important、双时长 transition。Tailwind v4 已移除零值类（mt-0 等），零值边距保持手写。
 - 导航（Layout.astro）：**保持原样未改动**（Portfolio / Latest Projects / About / Contact / Login / Signup），含页脚 Categories + Color Studio Tools + About/Contact 链接。门禁仅由 6 个 ComingSoon 占位页承担，导航不删任何链接（用户要求 header 别动）。
 
+## Layout 陷阱（重要，2026-08-12 踩坑）
+- **Layout.astro** 把 `<slot />` 包裹在 `<div class="flex-1 flex flex-col">`（flex column 容器）。
+- **禁用 `m-auto`** 作为页内根容器（`<div class="xxx m-auto">`）：它在 flex column 容器中作为 flex item 的 cross-axis `margin: auto`，会触发 **shrink-to-fit**（content 决定宽度），导致：
+  - 内容空/少时根容器收缩到极窄（骨架 24 张空 div → .showsroot 仅 626px / 主区 350px / 卡片 164px）。
+  - 内容多时根容器被撑大（真实卡片有 img/文字 → 1042px 「看起来正常」）。
+  - 同页面在不同内容状态下宽度剧烈变化 = 抖动。
+- **正确做法**：用 `w-full`（强制 100% 父容器，常配 `max-w-[xxx]`），或 `w-full mx-auto`（保留大屏居中）。
+- 适用范围：所有 Layout 内的页内根容器（包括 showsroot / blogs / about 等），**避免 `m-auto` 单独使用**。
+
 ## 部署（Docker + Gitea Actions）
 - 仅 brands.astro 构建期 SSR 取数（用 API_SSR）；其余页面运行时相对 /api 拉取（nginx 反代 backend:8090）。
 - 交付文件：前端 Dockerfile / nginx.conf / docker-compose.yml / deploy.sh / .gitea/workflows/deploy.yml / .env.example / DEPLOY.md；后端 Dockerfile。