mobile: per-view ≤480px rules across the CSS bundle
Adds the @media (max-width: 480px) blocks specified in the design: - dashboard.css: indicator table hides the 'mobile-hide'-tagged columns (Label, Ccy, 1y, anchor, as-of), keeping Symbol / Price / 1d / 1m. Cell padding + font shrink. Group-tab buttons get a bigger touch target. - panels.css: header padding tightens, scroll-body max-height drops to 60vh so log/news stay above the fold in the stacked layout. - portfolio.css: overall grid keeps 2 cols (already at 640px) with tighter gap; action buttons wrap; composer input goes full-width. - log-chat.css: chat bubbles edge-to-edge, input row stacks, font- size:14px on form fields to avoid iOS Safari zoom-on-focus. - news.css: row collapses to age | (title / source) — source moves under the title. Tag filter strip wraps. - settings.css: form rows stack (label above input). Import picker becomes single-column. Buttons full-width. - auth.css: card padding tightens to free up vertical space when the iOS keyboard is up. font-size:14px on inputs. - public.css: hero headline clamp() lower bound drops to 22px; CTAs stack full-width; pricing tier-grid stacks. indicators.html: tagged the secondary cells with .mobile-hide rather than relying on positional nth-child — the anchor column is conditional and would have shifted positions. 336 tests still pass.
This commit is contained in:
parent
2b3ea33884
commit
b6da1983d3
9 changed files with 253 additions and 10 deletions
|
|
@ -226,3 +226,42 @@
|
|||
vertical-align: middle;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* --- Mobile (≤480px) -------------------------------------------------- */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Hide secondary indicator-table columns: Label, Ccy, 1y, anchor,
|
||||
as-of. The cells are tagged with .mobile-hide in indicators.html;
|
||||
this rule keeps display intent in CSS while letting the template
|
||||
handle the conditional anchor column. Symbol / Price / 1d / 1m
|
||||
remain — the four numbers a phone user actually wants. */
|
||||
.dense .mobile-hide { display: none; }
|
||||
|
||||
/* Tighter cell padding so the four remaining columns fit
|
||||
comfortably on a 360px viewport. */
|
||||
.dense th, .dense td {
|
||||
padding: 4px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
/* Symbol column gets a touch more breathing room — it's the
|
||||
identifying anchor. */
|
||||
.dense td.label { font-weight: 600; }
|
||||
|
||||
/* Group-tabs strip already has overflow-x:auto; widen the tap
|
||||
targets so swipe-scrolling on a touchscreen feels natural. */
|
||||
.group-tabs button {
|
||||
padding: 8px 14px;
|
||||
font-size: 11.5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Aggregate-read summary header tightens — stack the label above
|
||||
the timestamp to avoid wrapping at awkward points. */
|
||||
.ind-summary__head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
}
|
||||
.ind-summary__body { font-size: 12px; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue