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

feat(ui): width-responsiveness — content max-width cap + per-surface form/input clamps

Browse Source 
Wide/ultrawide (1440-3440px) responsiveness was unhealthy: no page/content-level
max-width cap existed, and every card/form/table derived width from raw
GetContentRegionAvail().x with floor-only clamps, so surfaces stretched edge-to-edge
(2000-3000px inputs, ballooning cards, giant grid cells, 2000px+ dead row-voids).

Root cause: adopt the (previously dead-code) clamp helpers.
- New Layout::kContentMaxWidth() (~1600dp, tunable via ui.toml [layout]
  content-max-width; <=0 disables). Cap ##ContentArea to it and center the column in
  wider windows — every tab derives from this child, so one change tames the app at
  wide widths. No-op below the cap (fills as before), so 1080p/1440p are unaffected.

Per-surface upper-clamps (std::min(cap*dp, expr), floors preserved) where a single
element is still too wide even within the capped column:
- Settings: Theme/Layout/Language combos, the font-scale slider (~3000px -> 360dp),
  the effect sliders, Explorer URL and RPC credential fields.
- Send / Receive: cap the compose / receive cards to a readable form width and center
  them (Indent(pad+offset) so the auto-layout fields align with the hand-drawn card);
  the recent-tx lists below keep the full column width.
- Chat message bubbles + composer, mining pool URL/payout inputs + stats left/right
  split, contacts search, and the lite-network add-server row / server cards / status
  panel (capped + centered).
- Wizard: vertically center the cards when they fit (was top-anchored, leaving a void
  on tall monitors), compensating the content-height measurement so it can't oscillate.

The 1600 cap also subsumes the fixed-4-column balance grids (~400px cards) and the
right-anchored row dead-gaps (voids shrink from ~2700px to ~800px), so those are left
to the cap rather than blind column/row redesigns.

Verified at 1024/1280 (and via a temporary 900dp cap to exercise the cap+center path,
since the test display clamps to 1280) across full-node + Lite + Windows (ctest green)
and an adversarial diff review (clean). The true wide/ultrawide look and the 1600dp cap
value still want eyes on a real wide monitor.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DanS
2026-08-18 23:15:39 -05:00
co-authored by Claude Opus 4.8
parent ce8c7696d4
commit 9205addf55
11 changed files with 127 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/windows/chat_tab.cpp
+3 -2
View File
@@ -1313,7 +1313,7 @@ void RenderChatTab(App* app)
}
const float availW = ImGui::GetContentRegionAvail().x;
const float maxBubbleW = std::max(140.0f * dp, availW * 0.72f);
const float maxBubbleW = std::clamp(availW * 0.72f, 140.0f * dp, 560.0f * dp);
const float innerW = maxBubbleW - 2.0f * bpad;
// ── Date separator (once per calendar day): a centered pill.
@@ -1599,7 +1599,8 @@ void RenderChatTab(App* app)
const float ringR = std::max(7.0f, lineH * 0.42f);
const float ringPad = 9.0f * tdp;
const float ringSlot = 2.0f * ringR + ringPad * 1.6f;
const float inputW = std::max(ringSlot + 48.0f * tdp, cw - emojiBtn - 2.0f * inGap - sendW);
const float inputW = std::min(720.0f * tdp,
std::max(ringSlot + 48.0f * tdp, cw - emojiBtn - 2.0f * inGap - sendW));
const float sendX = inputX + inputW + inGap;
const float textW = std::max(40.0f * tdp, inputW - ringSlot); // input area, left of the ring
const ImVec2 ringC(inputX + inputW - ringPad - ringR, rowY + composerBoxH - ringPad - ringR);
src/ui/windows/contacts_tab.cpp
+1 -1
View File
@@ -960,7 +960,7 @@ void RenderContactsTab(App* app)
}
// Search / filter (tight against the toolbar row above — no extra spacer)
ImGui::SetNextItemWidth(ImGui::GetContentRegionAvail().x);
ImGui::SetNextItemWidth(std::min(ImGui::GetContentRegionAvail().x, 700.0f * dp));
ImGui::InputTextWithHint("##ContactSearch", TR("contacts_search_placeholder"),
s_search, sizeof(s_search));
bool searchActive = ImGui::IsItemActive();
src/ui/windows/mining_mode_toggle.cpp
+8 -3
View File
@@ -189,8 +189,11 @@ void RenderMiningModeToggle(App* app, const WalletState& state, const MiningInfo
float perGroupExtra = iconBtnW * 2; // dropdown + bookmark
float remainW = contentEndX - inputsStartX - Layout::spacingSm() - resetBtnW
- Layout::spacingSm() - perGroupExtra * 2;
float urlW = std::max(60.0f, remainW * 0.30f);
float wrkW = std::max(40.0f, remainW * 0.70f);
// Floor keeps the inputs usable when cramped; the ceiling stops a
// single input sprawling absurdly wide on a large window (leftover
// space becomes right-side margin). Caps are logical px * dp.
float urlW = std::min(std::max(60.0f, remainW * 0.30f), 420.0f * dp);
float wrkW = std::min(std::max(40.0f, remainW * 0.70f), 560.0f * dp);
// Track positions for popup alignment
float urlGroupStartX = ImGui::GetCursorScreenPos().x;
@@ -451,7 +454,9 @@ void RenderMiningModeToggle(App* app, const WalletState& state, const MiningInfo
// --- Worker: Popup positioned below the input group ---
// Popup sized to fit full z-addresses without truncation;
// zero horizontal padding so item highlights are flush with edges.
float addrPopupW = std::max(wrkGroupW, availWidth * 0.55f);
// Wide enough for full z-addresses, but ceiling it so it doesn't span
// the whole window on a large display (leftover -> unused margin).
float addrPopupW = std::min(std::max(wrkGroupW, availWidth * 0.55f), 640.0f * dp);
ImGui::SetNextWindowPos(ImVec2(wrkGroupStartX, wrkGroupStartY + inputFrameH2));
ImGui::SetNextWindowSize(ImVec2(addrPopupW, 0));
ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 4.0f * dp);
src/ui/windows/mining_stats.cpp
+15 -4
View File
@@ -399,7 +399,9 @@ void RenderMiningStats(const WalletState& state, const MiningInfo& mining,
ImVec2 cardMin = ImGui::GetCursorScreenPos();
// A bit wider than the old 25%/180dp so the pool rows fit the "<hashrate> N% fee" text.
float leftW = std::clamp(availWidth * 0.30f, 210.0f * dp, availWidth * 0.45f);
// Ratio ceiling (0.45) never binds on a wide window, so give leftW an
// absolute cap too — the pool card doesn't need to be enormous.
float leftW = std::clamp(availWidth * 0.30f, 210.0f * dp, 440.0f * dp);
float colGap = gap;
float rightW = availWidth - leftW - colGap;
@@ -414,6 +416,15 @@ void RenderMiningStats(const WalletState& state, const MiningInfo& mining,
RenderLeftPoolCard(app, state, dl, capFont, sub1, ovFont, dp, gap, pad,
leftMin, leftMax, s_pool_url, s_pool_settings_dirty);
// rightW is uncapped, so the chart/hint band it draws would sprawl the
// full panel on a wide window. Constrain just the drawn content to a
// centered ~1000dp band inside the panel's padded content region; the
// glass panel itself still fills rightW, leftover -> side margin.
const float rightContentW = rightW - pad * 2.0f;
const float chartBandW = std::min(rightContentW, 1000.0f * dp);
const float chartBandX = rightMin.x + pad
+ std::max(0.0f, (rightContentW - chartBandW) * 0.5f);
// Right panel: live log (if toggled + available) else the sparkline.
if (showLogView) {
float logPad = pad * 0.5f;
@@ -422,14 +433,14 @@ void RenderMiningStats(const WalletState& state, const MiningInfo& mining,
state.pool_mining.log_lines, "##PoolLogText");
} else if (hasChartContent) {
DrawHashrateSparkline(dl,
ImVec2(rightMin.x + pad, rightMin.y + statRowH * 0.5f),
ImVec2(rightMax.x - pad, rightMax.y),
ImVec2(chartBandX, rightMin.y + statRowH * 0.5f),
ImVec2(chartBandX + chartBandW, rightMax.y),
chartHistory, capFont, dp);
} else {
const char* hint = TR("mining_chart_start");
ImVec2 hs = capFont->CalcTextSizeA(capFont->LegacySize, FLT_MAX, 0, hint);
dl->AddText(capFont, capFont->LegacySize,
ImVec2((rightMin.x + rightMax.x - hs.x) * 0.5f,
ImVec2(chartBandX + (chartBandW - hs.x) * 0.5f,
(rightMin.y + rightMax.y - hs.y) * 0.5f),
OnSurfaceDisabled(), hint);
}
src/ui/windows/network_tab.cpp
+15 -7
View File
@@ -93,9 +93,12 @@ void RenderLiteNetworkTab(App* app)
const bool connected = ws.connected;
ImDrawList* sdl = ImGui::GetWindowDrawList();
const float panelH = 56.0f * dp;
const float panelW = ImGui::GetContentRegionAvail().x;
const float availPanelW = ImGui::GetContentRegionAvail().x;
const float panelW = std::min(1000.0f * dp, availPanelW);
const float panelOffsetX = std::max(0.0f, (availPanelW - panelW) * 0.5f);
const float pad2 = 12.0f * dp;
ImVec2 pMin = ImGui::GetCursorScreenPos();
pMin.x += panelOffsetX;
ImVec2 pMax(pMin.x + panelW, pMin.y + panelH);
GlassPanelSpec sspec; sspec.rounding = 8.0f * dp;
DrawGlassPanel(sdl, pMin, pMax, sspec);
@@ -150,7 +153,7 @@ void RenderLiteNetworkTab(App* app)
Primary(), barH * 0.5f);
}
ImGui::Dummy(ImVec2(panelW, panelH)); // reserve the panel (proper boundary growth)
ImGui::Dummy(ImVec2(availPanelW, panelH)); // reserve the full row (proper boundary growth)
ImGui::Spacing();
}
@@ -174,8 +177,8 @@ void RenderLiteNetworkTab(App* app)
{
const float availW = ImGui::GetContentRegionAvail().x;
const float addBtnW = 80.0f * dp;
const float urlW = (availW - addBtnW - 16.0f * dp) * 0.6f;
const float lblW = (availW - addBtnW - 16.0f * dp) * 0.4f;
const float urlW = std::min(550.0f * dp, (availW - addBtnW - 16.0f * dp) * 0.6f);
const float lblW = std::min(300.0f * dp, (availW - addBtnW - 16.0f * dp) * 0.4f);
ImGui::SetNextItemWidth(urlW);
ImGui::InputTextWithHint("##LiteAddUrl", TR("lite_net_add_url_hint"), s_addUrl, sizeof(s_addUrl));
ImGui::SameLine();
@@ -236,8 +239,11 @@ void RenderLiteNetworkTab(App* app)
auto it = probe.find(sv.url);
if (it != probe.end()) pr = it->second;
const float cardW = ImGui::GetContentRegionAvail().x;
const float availCardW = ImGui::GetContentRegionAvail().x;
const float cardW = std::min(1000.0f * dp, availCardW);
const float cardOffsetX = std::max(0.0f, (availCardW - cardW) * 0.5f);
ImVec2 cardMin = ImGui::GetCursorScreenPos();
cardMin.x += cardOffsetX;
ImVec2 cardMax(cardMin.x + cardW, cardMin.y + cardH);
const float rnd = 8.0f * dp;
const float cardBtnW = cardW - hideW;
@@ -326,8 +332,10 @@ void RenderLiteNetworkTab(App* app)
// Advance to the next card via a real item (Dummy) below the card, so the scroll region's
// content height actually grows — ImGui won't extend bounds from a bare SetCursorScreenPos.
ImGui::SetCursorScreenPos(ImVec2(cardMin.x, cardMax.y));
ImGui::Dummy(ImVec2(cardW, gap));
// Reset X to the (unshifted) region origin so next card's GetContentRegionAvail() isn't
// cumulatively narrowed by this card's centering offset.
ImGui::SetCursorScreenPos(ImVec2(cardMin.x - cardOffsetX, cardMax.y));
ImGui::Dummy(ImVec2(availCardW, gap));
};
// ── Visible servers ────────────────────────────────────────────────────────
src/ui/windows/receive_tab.cpp
+24 -9
View File
@@ -581,21 +581,34 @@ void RenderReceiveTab(App* app)
// MAIN CARD — single glass panel (channel split like Send tab)
// ================================================================
{
// Cap + center the card so the address/amount column stops stretching while the
// QR plateaus. cardW never exceeds formW (only shrinks); leftover becomes margin.
// The RECENT RECEIVED list below stays on the uncapped formW (handled separately).
float cardDp = Layout::dpiScale();
float cardW = std::min(formW, 860.0f * cardDp);
float cardLeftX = ImGui::GetCursorScreenPos().x;
float cardOffsetX = std::max(0.0f, (formW - cardW) * 0.5f);
if (cardOffsetX > 0.0f)
ImGui::SetCursorPosX(ImGui::GetCursorPosX() + cardOffsetX);
ImVec2 containerMin = ImGui::GetCursorScreenPos();
float pad = Layout::spacingLg();
float innerW = formW - pad * 2;
float innerW = cardW - pad * 2;
float innerGap = Layout::spacingLg();
// Channel split: content on ch1, glass background on ch0
dl->ChannelsSplit(2);
dl->ChannelsSetCurrent(1);
ImGui::Indent(pad);
// Indent carries the centering offset too, so ImGui auto-layout content (the address
// dropdown/inputs/chips) lands at containerMin.x + pad — matching the hand-drawn geometry
// (glass panel / QR column) that keys off the offset containerMin.x.
ImGui::Indent(pad + cardOffsetX);
ImGui::Dummy(ImVec2(0, pad)); // top padding
// ---- ADDRESS DROPDOWN + QR CODE — side by side ----
{
float qrColW = innerW * schema::UI().drawElement("tabs.receive", "qr-col-width-ratio").size;
float qrColW = std::min(innerW * schema::UI().drawElement("tabs.receive", "qr-col-width-ratio").size, 340.0f * cardDp);
float colGap = Layout::spacingLg();
float addrColW = innerW - qrColW - colGap;
float qrColX = containerMin.x + pad + addrColW + colGap;
@@ -876,7 +889,7 @@ void RenderReceiveTab(App* app)
S.drawElement("tabs.receive", "action-btn-height").size * vScale);
float footerH = innerGap + actionBtnH + pad;
float currentCardH = ImGui::GetCursorScreenPos().y - containerMin.y;
float targetCardH = std::min(Layout::mainCardTargetH(formW, vScale), recvCardCapH);
float targetCardH = std::min(Layout::mainCardTargetH(cardW, vScale), recvCardCapH);
float footerTopH = targetCardH - footerH;
if (currentCardH < footerTopH) {
ImGui::Dummy(ImVec2(0, footerTopH - currentCardH));
@@ -887,7 +900,7 @@ void RenderReceiveTab(App* app)
{
ImVec2 divPos = ImGui::GetCursorScreenPos();
dl->AddLine(ImVec2(containerMin.x + pad, divPos.y),
ImVec2(containerMin.x + formW - pad, divPos.y),
ImVec2(containerMin.x + cardW - pad, divPos.y),
ImGui::GetColorU32(Divider()), S.drawElement("tabs.receive", "divider-thickness").size);
}
ImGui::Dummy(ImVec2(0, innerGap * 0.5f));
@@ -967,24 +980,26 @@ void RenderReceiveTab(App* app)
// Bottom padding
ImGui::Dummy(ImVec2(0, pad));
ImGui::Unindent(pad);
ImGui::Unindent(pad + cardOffsetX);
// Enforce shared card height (matches QR-driven target), capped so the reserved
// RECENT RECEIVED slice below stays on-screen at HiDPI.
{
float currentCardH = ImGui::GetCursorScreenPos().y - containerMin.y;
float targetCardH = std::min(Layout::mainCardTargetH(formW, vScale), recvCardCapH);
float targetCardH = std::min(Layout::mainCardTargetH(cardW, vScale), recvCardCapH);
if (currentCardH < targetCardH)
ImGui::Dummy(ImVec2(0, targetCardH - currentCardH));
}
// Draw glass panel background on channel 0
ImVec2 containerMax(containerMin.x + formW, ImGui::GetCursorScreenPos().y);
ImVec2 containerMax(containerMin.x + cardW, ImGui::GetCursorScreenPos().y);
dl->ChannelsSetCurrent(0);
DrawGlassPanel(dl, containerMin, containerMax, glassSpec);
dl->ChannelsMerge();
ImGui::SetCursorScreenPos(ImVec2(containerMin.x, containerMax.y));
// Restore the original (uncapped) left edge so RECENT RECEIVED below renders
// full-width as-is, unaffected by the card's centering offset.
ImGui::SetCursorScreenPos(ImVec2(cardLeftX, containerMax.y));
ImGui::Dummy(ImVec2(formW, 0));
ImGui::Dummy(ImVec2(0, Layout::spacingSm()));
}
src/ui/windows/send_tab.cpp
+21 -4
View File
@@ -1266,6 +1266,12 @@ void RenderSendTab(App* app)
float contentStartY = ImGui::GetCursorPosY();
float formAvailW = ImGui::GetContentRegionAvail().x;
// The compose form reads best as a centered fixed-width column, not edge-to-edge.
// Cap the card to a readable form width and center it; the recent-sends list below
// deliberately keeps the full column width (formAvailW).
const float sendDp = Layout::dpiScale();
float formCardW = std::min(formAvailW, 760.0f * sendDp);
float formOffsetX = std::max(0.0f, (formAvailW - formCardW) * 0.5f);
float formW = formAvailW;
ImGui::BeginGroup();
@@ -1280,7 +1286,15 @@ void RenderSendTab(App* app)
// ================================================================
// COMPOSE FORM — single container for all fields
// ================================================================
// Full-column left edge, restored after the centered card so the recent-sends
// list below spans the full width again.
float formLeftX = ImGui::GetCursorPosX();
{
// Center the capped compose card: offset the cursor by the leftover half-margin,
// then derive every field/divider/button from the card width (not the full column).
float formW = formCardW;
if (formOffsetX > 0.0f)
ImGui::SetCursorPosX(ImGui::GetCursorPosX() + formOffsetX);
ImVec2 containerMin = ImGui::GetCursorScreenPos();
float pad = Layout::spacingLg();
float innerW = formW - pad * 2;
@@ -1293,8 +1307,10 @@ void RenderSendTab(App* app)
dl->ChannelsSplit(2);
dl->ChannelsSetCurrent(1);
// Indent content by pad so every line is inset from the card edges
ImGui::Indent(pad);
// Indent content by pad so every line is inset from the card edges. Fold in formOffsetX so the
// auto-layout fields land inside the centered card (Indent() positions from the window's left, so
// without this the fields would sit at the un-offset column while the glass card is centered).
ImGui::Indent(pad + formOffsetX);
ImGui::Dummy(ImVec2(0, pad * vScale)); // top padding
// ---- SOURCE ADDRESS ----
@@ -1593,7 +1609,7 @@ void RenderSendTab(App* app)
// Add bottom padding
ImGui::Dummy(ImVec2(0, pad * vScale));
ImGui::Unindent(pad);
ImGui::Unindent(pad + formOffsetX);
// Enforce shared card height (matches receive tab)
{
@@ -1626,7 +1642,8 @@ void RenderSendTab(App* app)
}
}
// ---- RECENT SENDS ----
// ---- RECENT SENDS ---- (full column width; reset X off the centered card)
ImGui::SetCursorPosX(formLeftX);
RenderRecentSends(state, formW, capFont, app);
ImGui::EndGroup();