mohsen_hassani/LedgerLine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Group frontend panels into explicit row containers

Browse Source 
Wrap Submit and Load burst in one full-width .row and Result, Chaos and
Service health in a second. Each .row splits its width evenly between its
panels (gap subtracted first) and stacks below 900px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Movses Aslanyan
2026-10-09 15:46:40 +03:30
co-authored by Claude Opus 5.5
parent 9f0d19c08f
commit 79a41bf869
2 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/gateway/static/index.html
+4
View File
@@ -12,6 +12,7 @@
</header> </header>
<main> <main>
<div class="row">
<section id="submit-panel"> <section id="submit-panel">
<h2>Submit a transaction</h2> <h2>Submit a transaction</h2>
<form id="tx-form"> <form id="tx-form">
@@ -51,7 +52,9 @@
<tbody><tr><td colspan="8">no burst run yet</td></tr></tbody> <tbody><tr><td colspan="8">no burst run yet</td></tr></tbody>
</table> </table>
</section> </section>
</div>
<div class="row">
<section id="result-panel"> <section id="result-panel">
<h2>Result</h2> <h2>Result</h2>
<p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p> <p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p>
@@ -73,6 +76,7 @@
<h2>Service health</h2> <h2>Service health</h2>
<div id="health-strip"></div> <div id="health-strip"></div>
</section> </section>
</div>
</main> </main>
<script src="/static/app.js"></script> <script src="/static/app.js"></script>
services/gateway/static/style.css
+13 -17
View File
@@ -39,31 +39,27 @@ header h1 {
font-size: 0.85rem; font-size: 0.85rem;
} }
/* 6-column grid: row 1 panels span 3 (half), row 2 panels span 2 (third).
The grid gap is subtracted before dividing, so with gap g and width W
a half panel is (W - g) / 2 and a third panel is (W - 2g) / 3. */
main { main {
display: grid; display: flex;
grid-template-columns: repeat(6, minmax(0, 1fr)); flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
main > section { /* Each row is full width and splits it evenly between its panels. The gap
grid-column: span 2; is subtracted before dividing, so with gap g and width W two panels are
min-width: 0; (W - g) / 2 each and three panels are (W - 2g) / 3 each. */
} .row {
display: grid;
#submit-panel, grid-auto-flow: column;
#load-panel { grid-auto-columns: minmax(0, 1fr);
grid-column: span 3; gap: 1.5rem;
width: 100%;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
main > section, .row {
#submit-panel, grid-auto-flow: row;
#load-panel {
grid-column: 1 / -1;
} }
} }