@iyulab/modern-app 0.28.1 → 0.28.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.28.2] - 2026-09-27
+
+### Fixed
+
+- **Long route screens keep the bottom gutter again.** Since 0.23.0 the `main-content` wrapper was
+  fixed to the height of the content area, so a screen taller than that overflowed the wrapper and
+  the scroll container dropped its bottom padding: scrolled to the end, the content sat flush on the
+  bottom edge. The wrapper now passes the height down *and* grows with the content
+  (`display: grid; min-height: 100%` — the same rule as `u-outlet`). Screens that fill the area
+  (`height: 100%`) are unchanged; with app notices shown, a filling screen gets the height below
+  them. If you worked around this with `u-sidebar-layout::part(main-content) { … }`, you can remove it.
+  ⚠ Do not set `align-content` on `::part(main-content)` — the height hand-down relies on its default.
+
+### Documentation
+
+- The layout reference now says that `part="main"` already has a 32px gutter and is the scroll
+  container — route screens should not add their own outer padding — and how to change it.
+
 ## [0.28.1] - 2026-09-24
 
 ### Fixed

package/dist/layouts/SidebarLayout.js

@@ -206,7 +206,7 @@ var O = class extends i {
         <div class="main" part="main" scrollable tabindex="-1" @keydown=${this._handleMainKeydown}>
           <u-progress-bar part="progress"></u-progress-bar>
 
-          <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
+          <div class="main-content ${this.hasNotice ? "has-notice" : ""}" part="main-content" ?inert=${this.hasOverlay}>
             <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices">
               <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
             </div>

package/dist/layouts/SidebarLayout.styles.js

@@ -207,8 +207,30 @@ var t = e`
     outline: none;
   }
 
+  /*
+   * 라우트 본문을 감싸는 래퍼. 동시에 두 가지여야 한다:
+   *   ⑴ 높이를 «물려준다» — 자손(아웃렛 → 화면)의 height: 100% 가 여기서 풀린다.
+   *   ⑵ 넘치는 화면과 «함께 자란다» — .main 은 스크롤 영역의 끝 padding 을 in-flow
+   *      자식(= 이 래퍼) 뒤에 붙이므로, 래퍼가 화면보다 작게 고정되면 화면이 래퍼 밖으로
+   *      넘치고 스크롤 끝의 아래 거터가 사라진다.
+   * height: 100% 는 ⑴만, min-height: 100% 단독은 ⑵만 준다(백분율 높이는 부모의 «height»
+   * 가 명시됐을 때만 풀린다 — 최솟값은 그 조건이 아니다). grid 만 둘을 함께 준다: 그리드
+   * 항목의 기본 stretch 는 백분율 해석이 아니라 «영역 채우기» 라 ⑴이 성립하고, 트랙 높이가
+   * auto 라 ⑵대로 자란다. 아웃렛(:where(u-outlet))이 같은 규칙을 쓴다.
+   * ⚠align-content 를 선언하지 말 것 — 규칙이 기본값 normal(= auto 트랙 늘리기)에 기댄다.
+   */
   .main-content {
-    height: 100%;
+    display: grid;
+    min-height: 100%;
+  }
+  /*
+   * 공지가 있으면 그 행은 내용 높이로 묶는다. 늘리기는 max 크기가 auto 인 트랙에만
+   * 적용되므로 max-content 행은 늘어나지 않고, 남는 높이는 뒤따르는 본문 행이 받는다.
+   * 공지가 없으면(.notices 가 display: none) 이 규칙도 없어야 한다 — 있으면 본문의 첫
+   * 자식이 이 행에 앉아 채우기를 잃는다.
+   */
+  .main-content.has-notice {
+    grid-template-rows: max-content;
   }
 
   /*
@@ -343,8 +365,11 @@ var t = e`
       padding: 0;
       overflow: visible;
     }
+    /* 인쇄는 쪽 나눔이 흐름을 따라야 하므로 grid 를 풀고 높이를 내용에 맡긴다
+       (아웃렛의 인쇄 규칙과 같은 이유 — grid 상자 안 끝 블록 여백이 쪽 경계를 넘는다). */
     .main-content {
-      height: auto;
+      display: block;
+      min-height: 0;
     }
     :host(:state(overlay)) .main-content {
       display: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.28.1",
+  "version": "0.28.2",
   "keywords": [
     "iyulab",
     "web-framework",

package/skills/modern-app/references/layout.md

@@ -260,7 +260,7 @@ Parts available for `styles` overrides on the root layout:
 | `sidebar-main` | Scrollable main nav area |
 | `sidebar-footer` | Pinned footer area |
 | `main` | Main content area (the scroll container) |
-| `main-content` | Wrapper holding route content inside `main` — the shell puts `inert` here while the overlay is open |
+| `main-content` | Wrapper holding route content inside `main` — passes the height down and grows with long content (see [Route content area](#route-content-area)); the shell puts `inert` here while the overlay is open |
 | `progress` | Top progress bar |
 | `overlay` | Route-independent overlay panel above `main` |
 | `overlay-close` | Overlay's close button |
@@ -287,6 +287,38 @@ the console. Give that container a height — for screen only, so printing is no
 }
 ```
 
+## Route content area
+
+`part="main"` is the **scroll container** for route content, and it already has a **32px gutter**
+(`padding: var(--u-space-3xl, 32px)`) on every side. **Route screens should not add their own outer
+padding** to `:host` — the gutters add up (32 + 16 = 48px), and they start to differ from screen
+to screen.
+
+To change or remove the gutter, override `main` — either through `layout.styles` or the part:
+
+```ts
+layout: { type: 'sidebar', styles: { main: { padding: '0' } } }   // full-bleed
+```
+
+```css
+u-sidebar-layout::part(main) { padding: 24px; }
+```
+
+⚠ `layout.styles` values are inline styles, so they also apply on print media (see [Printing](#printing));
+use `::part(main)` inside `@media screen` if the change is for the screen only.
+
+Inside it, `part="main-content"` wraps the route content and does two things at once:
+
+- **passes the height down** — a screen that fills the area (`height: 100%`, or a layout such as
+  `u-master-detail-layout`) resolves against the area minus its gutters;
+- **grows with long content** — a screen taller than the area scrolls inside `main` and keeps the
+  bottom gutter at the end of the scroll.
+
+App notices (`slot="notice"`) sit at the top of this wrapper at their own height; a filling screen
+gets the height that remains below them.
+
+⚠ Do not set `align-content` on `::part(main-content)` — the height hand-down relies on its default.
+
 ## Printing
 
 On print media the shell drops its app chrome and lets the content flow across pages: the