[fix](trx-frontend): widen main panel on large screens

Allow the main frontend card to grow past the previous 1280px cap
on large screens while keeping side gutters for bookmark stacks.

Only widen the desktop layout at 1440px+ and cap it at 1600px so the
main content stays readable with room for side bookmarks.

Co-Authored-By: OpenAI Codex <noreply@openai.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
This commit is contained in:
2026-03-17 22:07:36 +01:00
parent bcd3255ad7
commit da799a1d1f
@@ -31,6 +31,9 @@
--spectrum-plot-height: 160px; --spectrum-plot-height: 160px;
--jog-wheel-size: 83.2px; --jog-wheel-size: 83.2px;
--header-waterfall-overlap: 0rem; --header-waterfall-overlap: 0rem;
--card-base-max-width: 1280px;
--card-max-width: 1600px;
--card-bookmark-gutter: 4rem;
} }
[data-theme="light"] { [data-theme="light"] {
@@ -75,7 +78,7 @@ body {
overflow-y: auto; overflow-y: auto;
} }
.card { .card {
width: min(100%, 1280px); width: min(100%, var(--card-base-max-width));
margin: 0 auto; margin: 0 auto;
padding: 0.85rem 1.25rem 1.5rem; padding: 0.85rem 1.25rem 1.5rem;
background: transparent; background: transparent;
@@ -86,6 +89,15 @@ body {
flex-direction: column; flex-direction: column;
overflow: visible; overflow: visible;
} }
@media (min-width: 1440px) {
.card {
width: min(
var(--card-max-width),
calc(100vw - (var(--card-bookmark-gutter) * 2))
);
}
}
.label { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 6px; display: block; } .label { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 6px; display: block; }
#tab-main .label > span { #tab-main .label > span {
display: inline-block; display: inline-block;