DragonX/ObsidianDragon
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

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

Browse Source 
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:
DanS
2026-07-01 21:46:11 -05:00
parent 1faaa54a07
commit 3a9ff5f021
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
res/themes/ui.toml
View File

@@ -1325,6 +1325,9 @@ wallet-btn-padding = { size = 24.0 }
rpc-label-min-width = { size = 70.0 }
rpc-label-width = { size = 85.0 }
security-combo-width = { size = 120.0 }
# Node & Security: below this card-content width the NODE + SECURITY columns stack
# vertically (full width each) instead of sitting side by side.
node-sec-stack-width = { size = 600.0 }
port-input-min-width = { size = 60.0 }
port-input-width-ratio = { size = 0.4 }
idle-combo-width = { size = 64.0 }

20
src/ui/pages/settings_page.cpp
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()));