gpui: Fix hover styles not being applied during layout by errmayank · Pull Request #43324 · zed-industries/zed

errmayank · 2025-11-22T13:21:44Z

Release Notes:

Fixed GPUI hover styles not being applied during layout

Here's the before/after:

screen-recording-gpui-hover.mov

errmayank · 2025-11-22T13:24:58Z

Here is the example I used

use gpui::{
    AppContext, Application, Bounds, Context, InteractiveElement, IntoElement, ParentElement,
    Render, StatefulInteractiveElement, Styled, Window, WindowBounds, WindowOptions, div, px, rgb,
    size,
};

struct App {}

impl Render for App {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        let card = rgb(0x1a1a1a);
        let card_hover = rgb(0x292929);

        let primary = rgb(0xf0ab75);
        let accent = rgb(0xe78fdf);
        let border = rgb(0x4d4d4d);

        let h_card = px(60.);
        let h_item = px(40.);
        let h_label = px(24.);

        div()
            .flex()
            .flex_col()
            .size_full()
            .gap_4()
            .p_6()
            .bg(rgb(0x141414))
            .text_color(rgb(0xfcfcfc))
            .text_sm()
            .child(
                div()
                    .flex()
                    .flex_col()
                    .gap_2()
                    .child(div().child("Basic Hover"))
                    .child(
                        div()
                            .id("test-1")
                            .w_full()
                            .h(h_card)
                            .p_4()
                            .flex()
                            .items_center()
                            .bg(card)
                            .border_1()
                            .border_color(border)
                            .rounded_lg()
                            .hover(|style| style.text_color(accent).bg(card_hover))
                            .child("To Accent"),
                    ),
            )
            .child(
                div()
                    .flex()
                    .flex_col()
                    .gap_2()
                    .child("Hover + Active")
                    .child(
                        div()
                            .id("test-2")
                            .w_full()
                            .h(h_card)
                            .p_4()
                            .flex()
                            .items_center()
                            .bg(card)
                            .border_1()
                            .border_color(border)
                            .rounded_lg()
                            .hover(|style| style.text_color(primary).bg(card_hover))
                            .active(|style| style.text_color(accent).bg(card_hover))
                            .child("To Primary on hover, to Accent on click"),
                    ),
            )
            .child(
                div().flex().flex_col().gap_2().child("Group Hover").child(
                    div()
                        .id("group-parent")
                        .group("my-group")
                        .w_full()
                        .min_h(px(140.))
                        .p_4()
                        .bg(card)
                        .border_1()
                        .border_color(border)
                        .rounded_lg()
                        .text_color(rgb(0xd6d6dc))
                        .hover(|style| style.bg(card_hover))
                        .flex()
                        .flex_col()
                        .gap_2()
                        .child(div().h(h_label).child("Parent hover"))
                        .child(
                            div()
                                .id("group-child-1")
                                .h(h_item)
                                .p_2()
                                .flex()
                                .items_center()
                                .bg(card)
                                .border_1()
                                .border_color(border)
                                .rounded_md()
                                .hover(|style| style.text_color(primary))
                                .group_hover("my-group", |style| style.text_color(accent))
                                .child("To Accent on parent hover, to Primary on hover"),
                        )
                        .child(
                            div()
                                .id("group-child-2")
                                .h(h_item)
                                .p_2()
                                .flex()
                                .items_center()
                                .bg(card)
                                .border_1()
                                .border_color(border)
                                .rounded_md()
                                .group_hover("my-group", |style| style.text_color(primary))
                                .child("To Primary on parent hover"),
                        ),
                ),
            )
            .child(
                div()
                    .flex()
                    .flex_col()
                    .gap_2()
                    .child("Nested Independent Hovers")
                    .child(
                        div()
                            .flex()
                            .gap_2()
                            .w_full()
                            .h(h_card)
                            .child(
                                div()
                                    .id("nested-1")
                                    .flex_1()
                                    .h_full()
                                    .p_4()
                                    .flex()
                                    .items_center()
                                    .justify_center()
                                    .bg(card)
                                    .border_1()
                                    .border_color(border)
                                    .rounded_lg()
                                    .text_color(primary)
                                    .hover(|style| style.text_color(accent).bg(card_hover))
                                    .child("Primary to Accent"),
                            )
                            .child(
                                div()
                                    .id("nested-2")
                                    .flex_1()
                                    .h_full()
                                    .p_4()
                                    .flex()
                                    .items_center()
                                    .justify_center()
                                    .bg(card)
                                    .border_1()
                                    .border_color(border)
                                    .rounded_lg()
                                    .text_color(accent)
                                    .hover(|style| style.text_color(primary).bg(card_hover))
                                    .child("Accent to Primary"),
                            ),
                    ),
            )
    }
}

fn main() {
    Application::new().run(|cx| {
        let bounds = Bounds::centered(None, size(px(700.), px(600.0)), cx);
        cx.open_window(
            WindowOptions {
                window_bounds: Some(WindowBounds::Windowed(bounds)),
                ..Default::default()
            },
            |_window, cx| cx.new(|_cx| App {}),
        )
        .unwrap();
    });
}

huacnlee · 2025-12-09T14:23:17Z

The close button on Windows are can't change text color. If we can push this PR to complete. Then we can improve that detail.

Windows App	Zed

And I just clone the code of this PR. To apply for Zed TitleBar for test hover text color to expect this PR change apply for TitleBar close button on Windows to hover to set white text color.

Before

before.mp4

After

after.mp4

As you see, color has been changed, but there have a new bug: The icon text size is going to larger than before.

Here is the diff of crates/title_bar/src/platforms/platform_windows.rs file change diff:

diff --git a/crates/title_bar/src/platforms/platform_windows.rs b/crates/title_bar/src/platforms/platform_windows.rs
index 1df75ee8a9..21c473752c 100644
--- a/crates/title_bar/src/platforms/platform_windows.rs
+++ b/crates/title_bar/src/platforms/platform_windows.rs
@@ -120,7 +120,7 @@ impl RenderOnce for WindowsCaptionButton {
             .w(px(36.))
             .h_full()
             .text_size(px(10.0))
-            .hover(|style| style.bg(self.hover_background_color))
+            .hover(|style| style.bg(self.hover_background_color).text_color(gpui::white()))
             .active(|style| style.bg(self.active_background_color))
             .map(|this| match self.icon {
                 WindowsCaptionButtonIcon::Close => {

huacnlee · 2025-12-09T14:55:51Z

I recall researching this before when I was working on a PR #24723; This font size issue on hover seems to be related to this part of StyleRefinement.

zed/crates/gpui/src/style.rs

Lines 367 to 368 in 282c74d

    
               /// The font size to use, in pixels or rems. 
        
               pub font_size: AbsoluteLength,

errmayank · 2025-12-09T20:25:38Z

Ah I see, thanks! Will checkout the related StyleRefinement part.

Serophots · 2025-12-10T14:49:02Z

I think that what you've noticed with the text size changing is probably the same bug as in my PR here: #42852

errmayank · 2025-12-10T15:44:29Z

Yeah, I think it's the same bug @/Serophots.

errmayank · 2025-12-15T14:47:18Z

Now that @/Serophots' fix for text style refinement #42852 got merged, I don't see any text size reset on hover.

I've rebased this PR with current main and also updated my example.

@huacnlee can you also check on your side?

huacnlee · 2025-12-16T14:27:54Z

@errmayank Yes, now is fixed.

mikayla-maki · 2025-12-20T00:33:05Z

Thanks!

mikayla-maki · 2025-12-20T01:52:49Z

@errmayank looks like there's still some problems #43214 (comment)

errmayank · 2025-12-20T08:45:25Z

@mikayla-maki created a separate issue #45436 for tracking.

Potential fix in

gpui: Fix hover state getting stuck when rapidly hovering over elements #45437

danilo-leal · 2025-12-30T12:43:15Z

Heya — I think either this PR or #45437 introduced a regression. In the agent panel, the thread_history list item was using the on_hover method to render its delete button conditionally, but now (on main), it never shows up. I went through both PRs changes with an agent and after several runs of debug statements, we got to this diff:

This fixes the problem and I'm happy to push if it makes sense, but just wanted to give a shout out here before I do it in case these changes cause any other side effect I'm not aware of (I haven't seen anything visible while playing with it).

Closes #43214 Release Notes: - Fixed GPUI hover styles not being applied during layout Here's the before/after: https://github.com/user-attachments/assets/5b1828bb-234a-493b-a33d-368ca01a773b

Tackling this as I noticed a bug in the agent panel where the button to delete a thread, which appeared only on hover, stopped showing up. PRs #43324 and #45437 fixed stuff in applying hover styles through `.hover()` but broke the `.on_hover()` callback. Problem was that both methods were sharing the same `element_state.hover_state` but running at different phases. The solution here was to add a new independent state field for the hover listener (`hover_listener_state`) while the hover style method keeps using `hover_state`. Release Notes: - Agent: Fixed a bug where the button to delete a thread stopped showing up.

#46831) Cherry-pick of #46371 to stable ---- Tackling this as I noticed a bug in the agent panel where the button to delete a thread, which appeared only on hover, stopped showing up. PRs #43324 and #45437 fixed stuff in applying hover styles through `.hover()` but broke the `.on_hover()` callback. Problem was that both methods were sharing the same `element_state.hover_state` but running at different phases. The solution here was to add a new independent state field for the hover listener (`hover_listener_state`) while the hover style method keeps using `hover_state`. Release Notes: - Agent: Fixed a bug where the button to delete a thread stopped showing up. Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>

…s#43324) Closes zed-industries#43214 Release Notes: - Fixed GPUI hover styles not being applied during layout Here's the before/after: https://github.com/user-attachments/assets/5b1828bb-234a-493b-a33d-368ca01a773b

gpui: Fix hover styles not applied during layout

ed3d668

cla-bot bot added the cla-signed The user has signed the Contributor License Agreement label Nov 22, 2025

maxdeviant changed the title ~~gpui: Fix hover styles not applied during layout~~ gpui: Fix hover styles not being applied during layout Nov 22, 2025

SomeoneToIgnore assigned mikayla-maki Nov 22, 2025

zelenenka added this to Quality Week – December 2025 Nov 27, 2025

github-project-automation bot moved this to Community PRs in Quality Week – December 2025 Nov 27, 2025

errmayank force-pushed the gpui-hover-fix branch from 282c74d to ed3d668 Compare December 15, 2025 14:40

LMHCNLI mentioned this pull request Dec 17, 2025

GPUI: Text color change on hover not working #43214

Closed

mikayla-maki removed their assignment Dec 20, 2025

mikayla-maki merged commit 1d76539 into zed-industries:main Dec 20, 2025
23 checks passed

github-project-automation bot moved this from Community PRs to Done in Quality Week – December 2025 Dec 20, 2025

errmayank mentioned this pull request Dec 20, 2025

GPUI hover state stuck on rapidly hovering over elements #45436

Closed

danilo-leal mentioned this pull request Jan 8, 2026

gpui: Fix bug on on_hover callbacks #46371

Merged

zed-zippy bot mentioned this pull request Jan 14, 2026

gpui: Fix bug on on_hover callbacks (#46371) (cherry-pick to stable) #46831

Merged

Uh oh!

Conversation

errmayank commented Nov 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

errmayank commented Nov 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

huacnlee commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Uh oh!

huacnlee commented Dec 9, 2025

Uh oh!

errmayank commented Dec 9, 2025

Uh oh!

Serophots commented Dec 10, 2025

Uh oh!

errmayank commented Dec 10, 2025

Uh oh!

errmayank commented Dec 15, 2025

Uh oh!

huacnlee commented Dec 16, 2025

Uh oh!

mikayla-maki commented Dec 20, 2025

Uh oh!

Uh oh!

mikayla-maki commented Dec 20, 2025

Uh oh!

errmayank commented Dec 20, 2025

Uh oh!

danilo-leal commented Dec 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

errmayank commented Nov 22, 2025 •

edited

Loading

errmayank commented Nov 22, 2025 •

edited

Loading

huacnlee commented Dec 9, 2025 •

edited

Loading