@iyulab/modern-app 0.28.1 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## [0.29.0] - 2026-09-27
+
+### Fixed
+
+- 🔴 **A filling screen with a long table works again — do not use 0.28.2.** 0.28.2 made the
+  `main-content` wrapper a grid box with `min-height: 100%` to keep the bottom gutter on long
+  screens. A grid track is sized from its item's content, and during that sizing a screen's
+  `height: 100%` counts as `auto` — so a screen that fills the area with a table holding more rows
+  than fit (a toolbar plus `flex: 1; min-height: 0`) grew to every row, and the table never
+  scrolled. The wrapper now creates no box at all (`display: contents`), and neither does the
+  outlet (`@iyulab/router` 0.16.0, now required): route content sits directly in the scroll
+  container, which is the only arrangement where filling screens, filling screens with long tables
+  and long flowing screens all behave — including the bottom gutter 0.28.2 set out to restore.
+
+### Changed
+
+- `::part(main-content)` no longer takes box styling (`padding`, `background`, `border`) outside
+  the overlay; style `::part(main)` or the screen instead. While the overlay is open it becomes a
+  box at the area's height — the overlay's stacking boundary — as before.
+- With an app notice showing, a screen that fills the area overflows by the notice's height (as in
+  0.28.1). 0.28.2 avoided that only by breaking long tables; the two kinds of screen cannot be told
+  apart in CSS.
+- Requires `@iyulab/router` `^0.16.0`, where `<u-outlet>` also has no box.
+
+## [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.styles.js

@@ -207,8 +207,24 @@ var t = e`
     outline: none;
   }
 
+  /*
+   * 라우트 본문을 감싸는 래퍼 — 평소에는 «상자를 만들지 않는다»(display: contents).
+   *
+   * 높이가 정해진 스크롤 컨테이너(.main) 안에서 라우트 화면은 세 형태다: ⑴채움(height: 100%)
+   * ⑵채움-큼(채우되 안의 표가 뷰포트보다 많은 행을 자기 안에서 굴린다) ⑶흐름(길어지고 .main 이
+   * 스크롤한다). 사이에 상자가 있으면 셋 중 하나가 반드시 깨진다(실측):
+   *   · height: 100% → 상자가 못 박혀 ⑶의 화면이 밖으로 넘치고, .main 은 끝 padding 을 in-flow
+   *     자식(= 이 래퍼) 뒤에 붙이므로 스크롤 끝의 거터가 사라진다.
+   *   · grid + min-height: 100% → ⑶은 되지만 트랙이 항목의 내용 크기로 잡히고 그 계산 동안
+   *     height: 100% 는 auto 로 취급되어, ⑵의 표가 모든 행 높이로 자란다.
+   * 상자가 없으면 화면이 .main 을 직접 받는다. 아웃렛(u-outlet)도 같은 이유로 상자가 없다.
+   *
+   * ⚠공지(slot="notice")가 있으면 채우는 화면은 그 높이만큼 넘친다 — 공지는 본문 위 흐름 안에
+   *   있고, 채우는 화면의 height: 100% 는 공지를 모른다. 두 형태를 CSS 로 가를 수 없어 알려진
+   *   한계로 둔다(공지는 드물고 잠깐이다).
+   */
   .main-content {
-    height: 100%;
+    display: contents;
   }
 
   /*
@@ -263,6 +279,11 @@ var t = e`
    *   경계에 걸리지 않고, 오버레이가 열린 채로 일어나는 라우트 전환을 계속 보고한다.
    */
   :host(:state(overlay)) .main-content {
+    /* 쌓임 맥락은 상자가 있어야 생긴다 — 오버레이가 열린 동안만 상자를 둔다(본문은 inert 이고
+       오버레이 아래에 있다). height: 100% 라 채우는 화면은 그대로이고, 흐름 화면의 끝 거터만 그동안
+       빠진다. */
+    display: block;
+    height: 100%;
     isolation: isolate;
   }
 
@@ -343,9 +364,6 @@ var t = e`
       padding: 0;
       overflow: visible;
     }
-    .main-content {
-      height: auto;
-    }
     :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.29.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -59,7 +59,7 @@
     "test:react-types": "tsc -p tsconfig.react-smoke.json"
   },
   "dependencies": {
-    "@iyulab/router": "^0.15.1",
+    "@iyulab/router": "^0.16.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },

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` — creates no box, so route content sits directly in `main` (see [Route content area](#route-content-area)); the shell puts `inert` here while the overlay is open, and gives it a box then as the overlay's stacking boundary |
 | `progress` | Top progress bar |
 | `overlay` | Route-independent overlay panel above `main` |
 | `overlay-close` | Overlay's close button |
@@ -287,6 +287,49 @@ 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, the route content sits **directly** in that scroll container: neither
+`part="main-content"` nor `<u-outlet>` creates a box (`display: contents`). That is what lets all
+three kinds of screen work:
+
+| Screen | Behaviour |
+|---|---|
+| **Fills the area** — `height: 100%`, or a layout such as `u-master-detail-layout` | gets the area minus its gutters |
+| **Fills the area, more content than fits** — a toolbar plus a table with `flex: 1; min-height: 0` and more rows than the viewport | stays at the area's height; the table scrolls inside itself |
+| **Flows** — a form or document taller than the area | `main` scrolls, and the bottom gutter stays at the end of the scroll |
+
+Any box in between breaks one of them — a box pinned at `height: 100%` loses the bottom gutter on
+flowing screens, and a grid box with `min-height: 100%` grows a filling screen to every row of its
+table. So `::part(main-content)` accepts no box styling (`padding`, `background`, `border` do
+nothing); style `::part(main)` or the screen instead.
+
+⚠ **App notices push a filling screen down.** Notices (`slot="notice"`) sit at the top of the
+content at their own height, and a screen's `height: 100%` does not know about them, so while a
+notice shows, a filling screen overflows by the notice's height. The two kinds of screen cannot be
+told apart in CSS; notices are rare and short-lived.
+
+While the overlay is open, `part="main-content"` becomes a box at the area's height, because a
+stacking context needs one — route content is inert and under the overlay then.
+
 ## Printing
 
 On print media the shell drops its app chrome and lets the content flow across pages: the