From caadc2fe77f62eec1abb4fbd6a2bb473c18d4e0e Mon Sep 17 00:00:00 2001
From: ypshim <ypshim71@gmail.com>
Date: Mon, 26 Oct 2026 16:44:05 +0900
Subject: [PATCH] =?UTF-8?q?fix(rebar):=20=EB=8B=A8=EB=A9=B4=20A=C2=B7B?=
 =?UTF-8?q?=C2=B7C=EB=A5=BC=20=ED=95=9C=20=ED=96=89=EC=97=90=20=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기둥 패널의 단면 세 그림을 flex 한 행(nowrap)으로 두고, 좁은 화면에서는 가로 스크롤

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 src/main.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 0677265..c1fb524 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1254,9 +1254,16 @@ function renderColumnSettings(box: HTMLDivElement, pier: Pier): void {
       B: 'B 단부 · P5 첫 단 · 커플러 1개 (θ + Δθ/2)',
       C: 'C 확대기초 안 · P4 첫 단 · 커플러 2개 · P6 4본',
     };
-    const row = el('div', undefined, 'opts');
+    // 단면 A·B·C in one row (승인 2026-10-26): no wrapping, scrolls sideways on a narrow window.
+    const row = el('div');
+    row.style.display = 'flex';
+    row.style.flexWrap = 'nowrap';
+    row.style.gap = '12px';
+    row.style.overflowX = 'auto';
     for (const kind of ['A', 'B', 'C'] as const) {
       const fig = el('figure', undefined, 'ground-fig');
+      fig.style.margin = '0';
+      fig.style.flex = '0 0 300px';
       fig.innerHTML = columnSectionSvg(kind, input, col);
       fig.appendChild(el('figcaption', captions[kind], 'muted small'));
       row.appendChild(fig);