feat(chat): thicker, grabbable scrollbar for the message thread

The chat message thread used the global 6px scrollbar with a ~6% grab, which is
thin and hard to grab. Push a 12px scrollbar with a clearly-visible,
theme-adaptive grab (OnSurface at 55/95/135 alpha for idle/hover/active) for the
##ChatMessages child only, popped after EndChild. No change to the global
scrollbar or other scroll regions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-10-27 13:35:13 -05:00
co-authored by Claude Opus 4.8
parent 00d298453e
commit abbe5d8412
+9 -1
View File
@@ -1487,6 +1487,13 @@ void RenderChatTab(App* app)
const float origSpacingX = ImGui::GetStyle().ItemSpacing.x;
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(4.0f * dp, 8.0f * dp));
ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(origSpacingX, 0.0f));
// Thicker, clearly-visible scrollbar for the message thread: the global one is a thin 6px with a
// ~6% grab that's hard to see and grab. Pushed for this child only (popped after EndChild below).
ImGui::PushStyleVar(ImGuiStyleVar_ScrollbarSize, 12.0f * dp);
ImGui::PushStyleVar(ImGuiStyleVar_ScrollbarRounding, 6.0f * dp);
ImGui::PushStyleColor(ImGuiCol_ScrollbarGrab, material::WithAlpha(material::OnSurface(), 55));
ImGui::PushStyleColor(ImGuiCol_ScrollbarGrabHovered, material::WithAlpha(material::OnSurface(), 95));
ImGui::PushStyleColor(ImGuiCol_ScrollbarGrabActive, material::WithAlpha(material::OnSurface(), 135));
ImGui::BeginChild("##ChatMessages", ImVec2(0, ImGui::GetContentRegionAvail().y),
ImGuiChildFlags_AlwaysUseWindowPadding, ImGuiWindowFlags_NoScrollWithMouse);
material::ApplySmoothScroll(); // smooth wheel scroll; syncs with the auto-scroll-to-bottom below
@@ -1951,7 +1958,8 @@ void RenderChatTab(App* app)
}
}
ImGui::EndChild();
ImGui::PopStyleVar(2); // ##ChatMessages WindowPadding + zeroed vertical ItemSpacing
ImGui::PopStyleColor(3); // ScrollbarGrab + Hovered + Active
ImGui::PopStyleVar(4); // WindowPadding + ItemSpacing + ScrollbarSize + ScrollbarRounding
// Larger-messages tier 3: while a big incoming message is still arriving across transactions,
// show a subtle centred progress line (it surfaces as an ordinary bubble once every part lands).
{