kunthawat/set50-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): eliminate table/grid overflow breaking the frame at every width

Browse Source 
Two root causes of tables and panels spilling past the window frame:

1. Global 'table { min-width: 850px }' forced EVERY table (source/score/modal/
   backtest) to 850px regardless of container -> now min-width:0 so tables
   shrink to 100%; only .factor-table (stock board, inside .table-wrap)
   keeps its 850px and scrolls. Small tables get table-layout:fixed +
   overflow-wrap on mobile so long content wraps instead of pushing out.

2. Grid/flex tracks lacked minmax(0,1fr) / min-width:0, so wide grid items
   (KPI numbers, theme cards) pushed the whole row past the viewport at
   768-1040px (doc overflow 208px). Fixed: all grid-template-columns use
   minmax(0,1fr); .content is now flex:1 1 auto + min-width:0; KPI/theme/bt
   cards get min-width:0 + overflow-wrap.

Verified programmatically in-browser: document overflow = 0 at 320/360/500/
600/720/760/768/820/900/1040/1200/1440px; score-table + source-table over=0
at all widths (incl inside the per-source modal). Board scrolls in .table-wrap
as designed. Backend suite 369 green (CSS-only change).
This commit is contained in:
Kunthawat Greethong
2026-08-30 09:10:21 +07:00
parent de5dd29217
commit 053b94b45f
5 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/dist/index.html vendored
View File

@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0b1018" />
<title>SET50 Signal Lab</title>
<script type="module" crossorigin src="/assets/index-DDvZwbpd.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CUx7tUuk.css">
<script type="module" crossorigin src="/assets/index-ePg0o_Uc.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BiR2h3Pv.css">
</head>
<body>
<div id="app"></div>