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:
Giorgio Gilestro 2026-05-28 18:43:36 +02:00
parent 2b3ea33884
commit b6da1983d3
9 changed files with 253 additions and 10 deletions

View file

@ -84,3 +84,40 @@
}
.news-tag--clear { color: var(--dim); border-style: dashed; }
.news-tag--clear:hover { color: var(--negative); border-color: var(--negative); }
/* --- Mobile (≤480px) -------------------------------------------------- */
@media (max-width: 480px) {
/* The 720px rule already collapsed to age | source | title and
hid the right-side tag chips. At 480 we drop the source column
too and let the title flow under the age, with source as a small
line below the title saves another ~100px of horizontal room. */
.news-row {
grid-template-columns: 50px minmax(0, 1fr);
gap: 8px;
padding: 6px 10px;
}
.news-row .source {
grid-column: 2;
grid-row: 2;
font-size: 10.5px;
}
.news-row .title {
grid-column: 2;
grid-row: 1;
font-size: 12.5px;
line-height: 1.35;
}
/* Tag filter strip wraps onto multiple rows on a phone. */
.news-tags {
flex-wrap: wrap;
gap: 6px;
padding: 6px 8px;
}
.news-tag {
padding: 4px 8px;
font-size: 11px;
}
}