Week 06 · Component-Level Flexibility with CSS Container Queries

The Trading Dashboard cards now adapt to the space they receive, not only to the viewport.

This milestone duplicates the approved Week 05 output, keeps its layered and nested CSS architecture, then establishes inline-size container contexts so one reusable market card can stack in a narrow drawer and reflow horizontally in a wide workspace.

01

Progress preserved, components made context-aware

Weeks 02 through 05 remain frozen checkpoints. Week 06 adds component-level responsiveness without replacing the approved dashboard foundation.

Week 02

Design system tokens

OKLCH roles, fluid type, spacing variables, borders, focus states, and theme contracts remain the visual source of truth.

Week 03

Semantic dashboard frame

The command header, left rail, market workspace, context drawer, and status footer remain structurally intact.

Week 04

Asymmetric content hierarchy

The six-card market workspace and featured two-by-two market story remain preserved.

Week 05

Layered and nested CSS

The reset, base, layout, and components layers plus native nesting remain the Week 06 stylesheet foundation.

Week 06

Container-relative cards

The same reusable component now chooses stacked or horizontal internals from its direct container width.

02

Placement test: one component, two container widths

The adaptive card appears in both the wide market workspace and the narrow research drawer. Its internal layout changes through @container, not through a viewport media query.

Market command header

Container-aware workspace preview

Featured market overview

Cross-market pulse

Layout sample

The Week 04 asymmetric hierarchy remains in place while Week 06 adds a separate context-aware component test below it.

Track
2 columns
Depth
2 rows
Flow
Dense

Stocks

Watchlist scan

  • AAPLPrimary
  • MSFTSecondary
  • NVDACompare

Crypto

Digital asset radar

  • BTCMacro
  • ETHNetwork
  • SOLMomentum

Portfolio

Technique stack

Trend · SMA / EMA / VWAPMomentum · RSI / MACD / StochasticVolatility · Bollinger / ATR / ADX

Comparison

Relative strength

Large capBaseline
CryptoVolatile
CashDefensive

Risk context

Confluence queue

Fibonacci · Volume Profile · OBV · Pivot Points · Support/Resistance · Candlestick Patterns · Divergence · Ichimoku · Parabolic SAR

Wide placement · main workspace

Context-aware market brief

At 500px or wider this reusable card becomes a horizontal composition, with the visual beside the copy.

Week 06 container-query preview · Static educational content · No live market feed

03

Container context and component query contract

Page-level media queries still control macro dashboard tracks, while the Week 06 reusable card owns its internal response through a named inline-size container.

container: market-card-slot / inline-size

Establish the context

Each placement wrapper becomes an inline-size query container without changing the reusable card markup.

@container

Query the parent

The component responds to the nearest named container instead of checking the browser viewport.

min-width: 500px

Switch layout mode

The base card stacks vertically; a sufficiently wide container changes it to a horizontal row.

cqw

Micro-scale with context

Padding, gaps, and type use bounded container-relative units so the card can breathe proportionally inside either placement.

@media

Keep macro layout separate

Existing viewport queries still handle the overall dashboard frame and grid tracks; they do not control the new card's internal direction.

same markup

Placement independence

The main and context versions are identical components. Only their available container width changes the presentation.

.component-slot {
  container: market-card-slot / inline-size;
}

.adaptive-market-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 3cqw, 1.15rem);
  padding: clamp(0.8rem, 4cqw, 1.35rem);
}

@container market-card-slot (min-width: 500px) {
  .adaptive-market-card {
    flex-direction: row;
    align-items: center;
  }
}
04

Week 06 verification

The milestone is complete only when the same component visibly changes layout from parent width, not viewport-dependent card alignment.

  • Confirm Week 06 exists beside Week 05 and Weeks 02–05 remain unchanged historical checkpoints.
  • Inspect both .component-slot wrappers and confirm each establishes container: market-card-slot / inline-size.
  • At desktop width, confirm the main-workspace adaptive card is horizontal while the context-drawer copy of the same component remains vertically stacked.
  • Resize the page and confirm the component changes when its own container crosses 500px, not because a card-alignment @media rule fires.
  • Inspect the adaptive card rules and confirm no viewport media query sets its flex-direction.
  • Confirm bounded cqw values are used for component spacing or type without producing overflow at narrow widths.
  • Switch Standard, Playful Pop, Raggedy Granite, Glossy Marble, Luminous Midnight, and Gothic Stickerboard between dark and light modes and confirm the complete Week 06 page remains readable and themed.
Scope boundary

Week 06 adds component-level flexibility only. It does not add live prices, broker actions, production feeds, authentication, or trading logic.