feat(settings): make Node & Security columns responsive (stack when narrow)

The NODE + SECURITY split was a fixed 60/40 two-column layout regardless of
width, which cramps the RPC grid and wastes space on narrow windows. Make it
responsive: below a configurable content width (node-sec-stack-width, default
600) the two columns stack into one full-width column — SECURITY flows below
NODE — so each section gets the full width; side-by-side 60/40 is kept when
there's room. Column-geometry-only change (leftX/rightX/widths + the right
column's top Y); the content blocks are untouched. The rejoin already used
max(leftBottom, rightBottom), correct in both modes.

Full-node + lite build clean; source hygiene clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-01 21:46:11 -05:00
parent 1faaa54a07
commit 3a9ff5f021
2 changed files with 16 additions and 7 deletions

View File

@@ -1508,14 +1508,18 @@ void RenderSettingsPage(App* app) {
return std::max(minBtnW, maxTextW + btnPad * 2);
};
// --- NODE (left) + SECURITY (right) side by side ---
// --- NODE + SECURITY: side by side when wide, stacked when narrow ---
{
float colGap = Layout::spacingLg();
float leftColW = (contentW - colGap) * 0.6f;
float rightColW = (contentW - colGap) * 0.4f;
// Responsive: below this content width the two columns get too cramped (the RPC
// grid especially), so stack them into one full-width column instead.
float stackWidth = S.drawElement("components.settings-page", "node-sec-stack-width").sizeOr(600.0f);
bool stacked = contentW < stackWidth;
float leftColW = stacked ? contentW : (contentW - colGap) * 0.6f;
float rightColW = stacked ? contentW : (contentW - colGap) * 0.4f;
ImVec2 sectionOrigin = ImGui::GetCursorScreenPos();
float leftX = sectionOrigin.x;
float rightX = sectionOrigin.x + leftColW + colGap;
float rightX = stacked ? sectionOrigin.x : (sectionOrigin.x + leftColW + colGap);
// ---- LEFT COLUMN: NODE ----
ImGui::SetCursorScreenPos(ImVec2(leftX, sectionOrigin.y));
@@ -2025,9 +2029,11 @@ void RenderSettingsPage(App* app) {
ImGui::PopClipRect();
// ---- RIGHT COLUMN: SECURITY ----
ImGui::SetCursorScreenPos(ImVec2(rightX, sectionOrigin.y));
ImGui::PushClipRect(ImVec2(rightX, sectionOrigin.y),
ImVec2(rightX + rightColW, sectionOrigin.y + 9999), true);
// Stacked: flows below the left column; side-by-side: aligned to the section top.
float rightTopY = stacked ? (leftBottom + Layout::spacingMd()) : sectionOrigin.y;
ImGui::SetCursorScreenPos(ImVec2(rightX, rightTopY));
ImGui::PushClipRect(ImVec2(rightX, rightTopY),
ImVec2(rightX + rightColW, rightTopY + 9999), true);
Type().textColored(TypeStyle::Overline, OnSurfaceMedium(), TR("security"));
ImGui::Dummy(ImVec2(0, Layout::spacingXs()));