egg/DashBoard
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
35d83d424c84c22505780ee85633ccd28e1fb6bb
DashBoard/openspec/changes/archive/2026-02-11-fluid-layout-collapsible-sidebar/specs/tailwind-design-system/spec.md
egg 35d83d424c feat(shell): fluid layout with collapsible sidebar drawer + fix query-tool MultiSelect 
Convert portal shell from block-centered (max-width 1600px) layout to full-viewport
fluid flexbox with collapsible sidebar: desktop push-mode (240px → 0), mobile overlay
drawer with backdrop. Rename .content → .shell-content to avoid CSS collision with
page-level classes. Override page-level max-width constraints when embedded in shell.

Also replace native <select multiple> in query-tool with shared MultiSelect component
for equipment and workcenter group filters, matching resource-status/history UX.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-11 18:04:55 +08:00

1.1 KiB
Raw Blame History

MODIFIED Requirements

Requirement: Frontend styles SHALL be governed by Tailwind design tokens

The frontend SHALL define a Tailwind-based design token system for color, spacing, typography, radius, and elevation to ensure consistent styling across modules. The --portal-shell-max-width CSS variable SHALL be set to none to support the fluid layout. A --portal-sidebar-width variable SHALL be added for sidebar width reference. The .u-content-shell utility class SHALL use width: 100% instead of max-width constraint.

Scenario: Shared token usage across modules

  • WHEN two report modules render equivalent UI elements (e.g., card, filter chip, primary button)
  • THEN they SHALL use the same token-backed style semantics
  • THEN visual output SHALL remain consistent across modules

Scenario: Fluid layout tokens

  • WHEN the portal shell renders
  • THEN --portal-shell-max-width SHALL resolve to none
  • THEN --portal-sidebar-width SHALL resolve to 240px
  • THEN .u-content-shell SHALL apply width: 100% without max-width constraint