Commit Graph

103 Commits

Author SHA1 Message Date
kjh2064 1be7029f8f refactor(fe): viewport-fit zero-scroll layout for 11 pages (Part 2)
deploy / deploy (push) Failing after 51s
deploy / notify (push) Successful in 1s
## Summary
- BatchOperationsPageV2: add overflow-y: auto (ShadowRunQueue, DataQualityPage)
- ModelsList: add flex:1 + min-height:0 + overflow-y:auto
- ShadowRunList: change height to 100% (from calc(100vh - 210px))
- ModelOperationsPage: add overflow-y: auto
- WbsWorkspacePage: add flex:1 + min-height:0 + overflow-y:auto
- IngestionStatus, CommonCodeManagementPage: already fitted (via component inheritance)
- MarketDataIngestion: already fitted (EditFormPage)
- HomePage, RebalanceForm, UiStandardPage: already fitted (earlier session)

Total: 11 pages viewport-fit, 7 pages already compliant

Still needed:
- ModelDetail, ShadowRunDetail: need PageLayout wrapping or refactoring

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 15:00:03 +09:00
kjh2064 c1951dfa0e fix(fe): PageLayout - change workspace to flexbox (grid gap issue)
- Change .ks-page__workspace from grid to flex
- Reason: Grid gap calculation breaks flex: 1 height propagation
- Add flex-direction: column for proper child alignment
- Update .has-aside to use flex-direction: row

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 01:11:53 +09:00
kjh2064 bacde3f529 fix(fe): revert PageLayout to flexbox - fix grid gap calculation issue
Root cause: CSS Grid with optional (v-if) children caused inconsistent row counts.
Grid-template-rows: auto auto auto auto 1fr auto auto (7 rows) didn't match
actual child count (5-6 rows), causing 1fr collapse to 3px.

Solution: Revert to flexbox (proven stable).
- .ks-page: display: grid → display: flex; flex-direction: column
- .ks-page__workspace: add flex: 1 (replaces 1fr grid expansion)
- All flex children have min-height: 0 (height propagation chain)

Result: ShadowRunQueue grid now expands to full viewport height.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:54:19 +09:00
kjh2064 cd313ded65 fix(fe): eliminate page-level scroll via viewport-fit shell layout
Root cause (Part 2): Both KsAppShell and AppShellLayout used min-height: 100vh,
allowing flex containers to grow beyond viewport when content exceeded height.

Solution: Convert shell layouts from min-height: 100vh → height: 100vh (fixed).
Add min-height: 0 to intermediate flex containers (.ks-app-shell__container,
.ks-app-shell__main) for proper height propagation.

Changes:
- KsAppShell.vue: min-height: 100vh → height: 100vh
- KsAppShell.vue: add min-height: 0 to __container and __main
- AppShellLayout.vue: min-height: 100vh → height: 100vh (backup fix)

Tested: models-master now fits viewport perfectly, no page-level scroll.

Combined with previous PageLayout grid fix, all layout components now
follow single-screen principle: viewport-fit without overflow.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:46:17 +09:00
kjh2064 1d0fdcc013 fix(fe): PageLayout grid-based layout - eliminate flex gap height calculation error
Root cause: PageLayout's flex-direction: column + gap was not counted in flex: 1 height calculations, causing children to overflow and trigger scroll.

Solution: Convert PageLayout from flexbox to CSS Grid with explicit grid-template-rows. Grid automatically accounts for gaps in row sizing.

Changes:
- PageLayout.vue: display: flex → display: grid
- grid-template-rows: auto auto auto auto 1fr auto auto
- .ks-page__content/.ks-page__aside: height: 100% → flex: 1
- .ks-page__workspace: removed flex: 1 (grid cell, not flex)

Impact:
- models-master fits viewport without page-level scroll ✓
- All screen-types layouts auto-fit with correct height propagation
- Fix applies to all pages using PageLayout

AGENTS.md v16.0: Added Layout Rule #7 (PageLayout grid requirement)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:41:30 +09:00
kjh2064 b2aaf3ed75 fix(fe): sidebar footer alignment and scroll structure
Changes:
  • Reorganize footer: buttons first, version text below
  • Add .ks-sidebar__footer-buttons wrapper for proper layout
  • Style .ks-sidebar__version as small caption text (10px)
  • Fix sidebar scroll: sidebar overflow: hidden, nav: overflow-y: auto only
  • Add flex-shrink: 0 to footer (prevent size collapse)

This prevents:
  ✓ Nested scroll (sidebar + nav both scrolling)
  ✓ Awkward footer alignment
  ✓ Footer contributing to layout scroll

Single-scroll principle: only .nav scrolls, header/footer fixed

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:32:04 +09:00
kjh2064 d897515614 feat(fe): add app version display in sidebar footer
- Display app version (v0.1.0 or VITE_APP_VERSION) in sidebar footer
- Hidden when sidebar is collapsed
- Positioned above Help/Settings buttons

This provides system version visibility without requiring footer.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:30:54 +09:00
kjh2064 17bb6ed72d refactor(fe): centralize footer exclusion to base.css - single source of truth
Changes:
  • base.css: Add global footer hiding rule (applies to all .ks-page__footer, .ks-shell__footer, footer[class*=ks-])
  • PageLayout: Remove individual footer CSS (use global rule)
  • AppShellLayout: Remove individual footer CSS (use global rule)

Benefits:
  ✓ Single source of truth (base.css)
  ✓ Easier to maintain and update globally
  ✓ Consistent behavior across all layouts
  ✓ Can enable/disable with one change if needed
  ✓ Structure preserved (v-if, grid-areas intact)

Design principle: Single-screen + content-first
  • All controls in header/command-bar/summary
  • Recover ~48-64px per page for content
  • Mobile-friendly (no hard-to-reach footer)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:25:25 +09:00
kjh2064 2b4f043989 fix(fe): exclude all footers - maximize screen real estate
Changes:
  • PageLayout: .ks-page__footer { display: none; }
  • AppShellLayout: .ks-shell__footer { display: none; }
  • AGENTS.md: Enhanced footer policy (all levels excluded)

Policy: Single-screen principle
  ✓ NO page-level footers (PageLayout #footer)
  ✓ NO global footers (AppShellLayout footer)
  ✓ All controls → header/command-bar/summary
  ✓ Maximize content area (recover ~48-64px per page)
  ✓ Mobile-friendly (bottom footer = hard to reach)

Structure preserved (v-if, grid-areas) for backward compatibility.
CSS hiding allows future restoration if needed.

Reference: Session 2026-08-16, responsive design + content-first UX

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:24:59 +09:00
kjh2064 5e686a0613 fix(fe): complete responsive design standardization for all layouts
- DashboardLayout: breakpoint 900px → 1100px
- AppShellLayout: hardcoded 16rem → var(--ks-sidebar-width), breakpoint 900px → 1100px
- CrudWorkspaceLayout: already compliant (CSS variables + 1100px)

All 7 layouts now use:
   CSS variables (no hardcoded widths)
   Unified breakpoints (1100px tablet, 768px mobile)
   Flex: 1 / min-height: 0 height propagation

Reference: docs/FRONTEND-RESPONSIVE-DESIGN-STANDARD.md

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:16:47 +09:00
kjh2064 ffc1f5b1b5 fix(fe): responsive design standardization - CSS variables and unified breakpoints
- FormPageLayout: hardcoded minmax(18rem, 26rem) → var(--ks-preview-width)
- ReviewWorkbenchLayout: hardcoded minmax values → var(--ks-detail-width) + var(--ks-aside-width)
- OperationsConsoleLayout: hardcoded minmax(18rem, 28rem) → var(--ks-detail-width)
- Unified all breakpoints: 950px/1000px/1200px → 1100px (tablet), 768px (mobile)
- PageLayout: footer sticky overflow issue fixed (flex: 0 0 auto)

Fixes responsive design for all screen sizes (768px mobile → 1920px fullHD → 2560px 4K).
Reference: docs/FRONTEND-RESPONSIVE-DESIGN-STANDARD.md

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-16 00:12:21 +09:00
kjh2064 4d45d8c7f0 fix(fe): add height propagation to FormPageLayout - standardize form pages
- Add flex: 1; min-height: 0; height: 100% to .ks-form-layout
- Add overflow-y: auto; min-height: 0 to form/preview panes
- Ensures single-screen principle for form-based pages
- Affects: MarketDataIngestion, EditFormPage, and similar layouts
2026-08-16 00:04:56 +09:00
kjh2064 8ea0bf4d99 fix(fe): enforce single-screen viewport principle for ApprovalQueue
PRINCIPLE: First load must fit within single viewport (no scroll required,
excluding dashboard summary section).

CHANGES:
1. ReviewWorkbenchLayout.vue
   - Changed: height: calc(100vh - 220px) → height: 100%
   - Reason: calc() was hardcoded to fixed pixels, not respecting parent flex layout
   - Added: min-height: 0 (critical for flex overflow behavior)

2. ApprovalQueue.vue (.content)
   - Added: height: 100% + min-height: 0

3. ApprovalQueue.vue (.detail-panel)
   - Removed: max-height: 700px (was hard limit, causing overflow)
   - Added: height: 100% + min-height: 0

RESULT: Page now fits single viewport without scroll.
Individual panels (list, detail) maintain internal scroll as needed.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-15 23:32:03 +09:00
kjh2064 1e48b4987d style(fe): centralize filter input standardization in PageLayout
PageLayout now provides default styles for all filter inputs:
- Height: 34px
- Padding: 0 0.75rem
- Line-height: 34px
- Border-radius: 4px
- Box-sizing: border-box

This eliminates the need for each page to redefine input styles.
Individual pages now only override width constraints (search-input max-width).

Aligns with DRY principle - single source of truth for input styling.

DataQualityPage:
- Added scoped styles for search-input max-width (350px)

Future: Consider extracting filter inputs into dedicated components
(<KsFilterInput>, <KsFilterSelect>) for even better reusability.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-15 23:15:51 +09:00
kjh2064 60722576a6 style(fe): standardize filter section height across all pages
PageLayout:
- Filter section: min-height 52px (standard height)
- Display: flex with center alignment
- Consistent gap between elements

ModelsList:
- Filter container: align-items center
- Remove bottom margin (handled by PageLayout)

Ensures all pages have consistent filter bar heights
and alignment without per-page CSS adjustments.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-15 23:04:59 +09:00
kjh2064 83b8f2e72f style(fe): apply theme-aware colors to SkeletonLoader
- Light theme: neutral-100/200 with white background
- Dark theme: dark grays (2d3748/4a5568) with dark background
- Uses CSS variables for dark mode support
- Shimmer animation adapts to theme
- Automatic light/dark switching via prefers-color-scheme

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-15 23:01:43 +09:00
kjh2064 319ee354d3 style(fe): fix contrast and theme token bindings for Page Title and Command Bar in PageLayout 2026-08-15 22:34:10 +09:00
kjh2064 7ad5b96bf8 style(fe): align Page Header strictly with KBX UX Standard (Breadcrumb/Title on left, Help/AI on right) 2026-08-15 22:32:58 +09:00
kjh2064 ea2f251fb8 feat(fe): implement dedicated KBX Command Bar row in PageLayout for 100% UX Standard §3/§5 alignment 2026-08-15 22:30:58 +09:00
kjh2064 2b1dc13852 style(fe): standardize Model Operations & Versioning page UI components and layout 2026-08-15 22:28:51 +09:00
kjh2064 fe96bae516 feat(fe): implement KsSplitter with resizer handle and localStorage ratio persistence for master-detail pages 2026-08-15 22:24:23 +09:00
kjh2064 7893b2020e fix(fe): conditionally render filters slot container in MasterDetailCrudPage and BatchOperationsPageV2 2026-08-15 22:22:01 +09:00
kjh2064 292572e845 revert(fe): restore original search input bar in header 2026-08-15 22:20:36 +09:00
kjh2064 3e6f333ff8 style(fe): apply KBX Design System Side Navigation standards (Expanded 220px, Collapsed 56px, max 2-depth) 2026-08-15 22:19:49 +09:00
kjh2064 8d8355b323 style(fe): refine PageLayout filters container to inline toolbar without heavy card borders 2026-08-15 22:18:34 +09:00
kjh2064 5aeadb79c1 style(fe): restore Quick Links Toolbar in header according to user specifications 2026-08-15 22:17:52 +09:00
kjh2064 cc5b4757c4 style(fe): align tabs bar background with central canvas token var(--ks-color-canvas) 2026-08-15 22:14:36 +09:00
kjh2064 1476225c21 style(fe): standardize Tabs bar, Help button badge, and Header Quick Menu dropdown 2026-08-15 22:13:50 +09:00
kjh2064 5dbf0077e4 style(fe): standardize ModelList master-detail page with central width tokens, selection highlight, and viewport-fit bounds 2026-08-15 22:12:16 +09:00
kjh2064 38a8cb85cd fix(fe): register ColumnAutoSizeModule and CellStyleModule in ModuleRegistry for AG Grid v34+ compatibility 2026-08-15 22:08:40 +09:00
kjh2064 8d817de082 fix(fe): ensure grid headers and container structure always stay rendered even when 0 records exist 2026-08-15 22:01:22 +09:00
kjh2064 0328551df3 fix(fe): ensure No. column row numbers 1, 2, 3 remain strictly fixed via redrawRows on sort-changed 2026-08-15 21:57:08 +09:00
kjh2064 269773400e fix(fe): ensure No. column always renders dynamic viewport row index 1, 2, 3 during sorting 2026-08-15 21:52:07 +09:00
kjh2064 1d0867d039 feat(fe): auto-prepend pinned left No. row-number column in KsDataGrid and harness in AGENTS.md 2026-08-15 21:51:01 +09:00
kjh2064 db3865cb6c feat(fe): standardize empty data state with EmptyStatePlaceholder component and AGENTS.md rule 2026-08-15 21:45:50 +09:00
kjh2064 c320318207 feat(fe): standardize loading UI using shimmer SkeletonLoader across QueryStateBoundary and AGENTS.md 2026-08-15 21:44:45 +09:00
kjh2064 b45898ba0d fix(fe): eliminate 22rem right margin collapse caused by empty runbook slot 2026-08-15 21:40:58 +09:00
kjh2064 604613492f fix(fe): auto fit grid column widths to 100% parent container width 2026-08-15 21:38:24 +09:00
kjh2064 f14458cf41 feat(fe): display system version and contract version in app footer 2026-08-15 21:36:58 +09:00
kjh2064 8da9d87bf1 fix(fe): remove duplicate shell breadcrumb and align grid width to parent container 2026-08-15 21:35:31 +09:00
kjh2064 c892f5b1ed fix(fe): fix breadcrumb text overlap and clean title layout in PageLayout 2026-08-15 21:31:23 +09:00
kjh2064 a239e6ab64 feat(fe): support explicit relative flex ratios per grid column 2026-08-15 21:30:13 +09:00
kjh2064 f9f05a2318 fix(fe): enforce 100% viewport width and zero-scroll overflow hidden on main shell 2026-08-15 21:29:21 +09:00
kjh2064 a47859f295 fix(fe): stretch QueryStateBoundary and BatchOperationsPageV2 to display grid seamlessly 2026-08-15 21:28:01 +09:00
kjh2064 e8b4d561c1 style(fe): standardize page header action toolbar layout and button naming 2026-08-15 21:26:08 +09:00
kjh2064 82d24abfb4 feat(fe): collapse page subtitle into on-demand help toggle button for ultra-compact layout 2026-08-15 21:25:05 +09:00
kjh2064 6483757ba0 fix(fe): structural flex layout fix for 100% viewport height zero-scroll fit 2026-08-15 21:24:28 +09:00
kjh2064 c1d818bce7 fix(fe): enable column flex auto-expansion in KsDataGrid to fill 100% grid width 2026-08-15 21:23:45 +09:00
kjh2064 4780093f11 fix(fe): eliminate duplicate wrappers and enforce exact viewport-fit grid height in ShadowRunQueue 2026-08-15 21:20:26 +09:00
kjh2064 2a75df7c5f style(fe): enforce viewport-fit zero-scroll layout for all non-dashboard workstation screens 2026-08-15 21:18:26 +09:00