From 6c251075080b4cdbf8c8d6aa6debaef66cf83d65 Mon Sep 17 00:00:00 2001 From: Davit Matchakhelidze Date: Thu, 22 Oct 2026 21:19:02 +0400 Subject: [PATCH] ui: the Discord button widens to fit its label instead of spilling out The start screen's community card reserves the button's measured width, so the line beside it wraps before the button. Georgian's label overflowed the fixed 190 px. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01YMTAbGNRxnMEzRvYnQGphF --- crates/ui-egui/src/about.rs | 18 +++++++++++++----- crates/ui-egui/src/chrome.rs | 6 ++++-- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/crates/ui-egui/src/about.rs b/crates/ui-egui/src/about.rs index 14745607a..75442b93c 100644 --- a/crates/ui-egui/src/about.rs +++ b/crates/ui-egui/src/about.rs @@ -77,16 +77,24 @@ pub fn paint_chat_icon(p: &egui::Painter, c: egui::Pos2, s: f32, color: Color32) p.circle_filled(body.center() + vec2(s * 0.18, 0.0), eye, bg); } -/// The big "Join our Discord" button. Returns true when clicked. +/// The Discord button's size for `label`: `min`, widened when the label would not fit inside it. +pub fn discord_button_size(ctx: &egui::Context, label: &str, min: egui::Vec2) -> egui::Vec2 { + let galley = crate::rtl::plain(ctx, label, semibold((min.y * 0.42).max(11.0)), Color32::WHITE); + egui::vec2(min.x.max(min.y * 0.5 + 8.0 + galley.size().x + min.y), min.y) +} + +/// The big "Join our Discord" button. Returns true when clicked. `size` is the minimum: a longer label +/// widens the button (see `discord_button_size`) rather than spilling out of it. pub fn discord_button(ui: &mut egui::Ui, label: &str, size: egui::Vec2) -> bool { - let (r, resp) = ui.allocate_exact_size(size, Sense::click()); - let resp = resp.on_hover_text(links::DISCORD).on_hover_cursor(egui::CursorIcon::PointingHand); - let fill = if resp.hovered() { Color32::from_rgb(0x47, 0x52, 0xc4) } else { DISCORD }; - ui.painter().rect_filled(r, size.y / 2.0, fill); + let size = discord_button_size(ui.ctx(), label, size); let icon = size.y * 0.5; let font = semibold((size.y * 0.42).max(11.0)); let galley = crate::rtl::plain(ui.ctx(), label, font, Color32::WHITE); let total = icon + 8.0 + galley.size().x; + let (r, resp) = ui.allocate_exact_size(size, Sense::click()); + let resp = resp.on_hover_text(links::DISCORD).on_hover_cursor(egui::CursorIcon::PointingHand); + let fill = if resp.hovered() { Color32::from_rgb(0x47, 0x52, 0xc4) } else { DISCORD }; + ui.painter().rect_filled(r, size.y / 2.0, fill); let x0 = r.center().x - total / 2.0; paint_chat_icon(ui.painter(), pos2(x0 + icon / 2.0, r.center().y), icon, Color32::WHITE); ui.painter().galley(pos2(x0 + icon + 8.0, r.center().y - galley.size().y / 2.0), galley, Color32::WHITE); diff --git a/crates/ui-egui/src/chrome.rs b/crates/ui-egui/src/chrome.rs index e853e6793..be139a095 100644 --- a/crates/ui-egui/src/chrome.rs +++ b/crates/ui-egui/src/chrome.rs @@ -1060,7 +1060,9 @@ fn community_card(app: &mut DesignApp, ui: &mut egui::Ui) { let (r, _) = ui.allocate_exact_size(vec2(44.0, 44.0), Sense::hover()); crate::about::paint_mark(ui, r, crate::about::BRAND); ui.add_space(8.0); - let text_width = (ui.available_width() - BUTTON.x - 16.0).max(120.0); + let label = crate::i18n::tr(&app.ui.language, "Join our Discord"); + let button = crate::about::discord_button_size(ui.ctx(), label, BUTTON); + let text_width = (ui.available_width() - button.x - 16.0).max(120.0); ui.vertical(|ui| { ui.set_max_width(text_width); ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Wrap); @@ -1090,7 +1092,7 @@ fn community_card(app: &mut DesignApp, ui: &mut egui::Ui) { }); }); ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| { - if crate::about::discord_button(ui, crate::i18n::tr(&app.ui.language, "Join our Discord"), BUTTON) { + if crate::about::discord_button(ui, label, BUTTON) { let _ = app.run("help.discord", json!({})); } });