fix(stack): show tab text overlay when overflowing

src/shell/element/stack/tab.rs

@@ -1,26 +1,18 @@
 use cosmic::{
     font::Font,
-    iced::{
+    iced::widget::{self, container::draw_background, rule::FillMode},
-        widget::{self, container::draw_background, rule::FillMode},
-        Element,
-    },
     iced_core::{
         alignment, event,
         layout::{Layout, Limits, Node},
         mouse, overlay, renderer,
         widget::{
             operation::{Operation, OperationOutputWrapper},
-            text::StyleSheet as TextStyleSheet,
             tree::Tree,
             Id, Widget,
         },
         Clipboard, Color, Length, Rectangle, Shell, Size,
     },
-    iced_style::{
+    iced_widget::scrollable::AbsoluteOffset,
-        button::StyleSheet as ButtonStyleSheet, container::StyleSheet as ContainerStyleSheet,
-        rule::StyleSheet as RuleStyleSheet,
-    },
-    iced_widget::{scrollable::AbsoluteOffset, text},
     theme,
     widget::{icon::from_name, Icon},
     Apply,
@@ -52,28 +44,29 @@ pub(super) fn selected_state_color(theme: &cosmic::cosmic_theme::Theme) -> Color
     }
 }
 
+#[derive(Clone, Copy)]
 pub(super) enum TabRuleTheme {
     ActiveActivated,
     ActiveDeactivated,
     Default,
 }
 
-impl Into<theme::Rule> for TabRuleTheme {
+impl From<TabRuleTheme> for theme::Rule {
-    fn into(self) -> theme::Rule {
+    fn from(theme: TabRuleTheme) -> Self {
-        match self {
+        match theme {
-            Self::ActiveActivated => theme::Rule::custom(|theme| widget::rule::Appearance {
+            TabRuleTheme::ActiveActivated => Self::custom(|theme| widget::rule::Appearance {
                 color: theme.cosmic().accent_color().into(),
                 width: 4,
                 radius: 0.0.into(),
                 fill_mode: FillMode::Full,
             }),
-            Self::ActiveDeactivated => theme::Rule::custom(|theme| widget::rule::Appearance {
+            TabRuleTheme::ActiveDeactivated => Self::custom(|theme| widget::rule::Appearance {
                 color: theme.cosmic().palette.neutral_5.into(),
                 width: 4,
                 radius: 0.0.into(),
                 fill_mode: FillMode::Full,
             }),
-            Self::Default => theme::Rule::custom(|theme| widget::rule::Appearance {
+            TabRuleTheme::Default => Self::custom(|theme| widget::rule::Appearance {
                 color: theme.cosmic().palette.neutral_5.into(),
                 width: 4,
                 radius: 8.0.into(),
@@ -103,30 +96,30 @@ impl TabBackgroundTheme {
     }
 }
 
-impl Into<theme::Container> for TabBackgroundTheme {
+impl From<TabBackgroundTheme> for theme::Container {
-    fn into(self) -> theme::Container {
+    fn from(background_theme: TabBackgroundTheme) -> Self {
-        match self {
+        match background_theme {
-            Self::ActiveActivated => {
+            TabBackgroundTheme::ActiveActivated => {
-                theme::Container::custom(move |theme| widget::container::Appearance {
+                Self::custom(move |theme| widget::container::Appearance {
                     icon_color: Some(Color::from(theme.cosmic().accent_text_color())),
                     text_color: Some(Color::from(theme.cosmic().accent_text_color())),
-                    background: Some(self.background_color(theme).into()),
+                    background: Some(background_theme.background_color(theme).into()),
                     border_radius: 0.0.into(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
                 })
             }
-            Self::ActiveDeactivated => {
+            TabBackgroundTheme::ActiveDeactivated => {
-                theme::Container::custom(move |theme| widget::container::Appearance {
+                Self::custom(move |theme| widget::container::Appearance {
                     icon_color: None,
                     text_color: None,
-                    background: Some(self.background_color(theme).into()),
+                    background: Some(background_theme.background_color(theme).into()),
                     border_radius: 0.0.into(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
                 })
             }
-            Self::Default => theme::Container::Transparent,
+            TabBackgroundTheme::Default => Self::Transparent,
         }
     }
 }
@@ -154,7 +147,7 @@ pub struct Tab<Message: TabMessage> {
     active: bool,
 }
 
-impl<Message: TabMessage> Tab<Message> {
+impl<Message: TabMessage + 'static> Tab<Message> {
     pub fn new(title: impl Into<String>, app_id: impl Into<String>, id: Id) -> Self {
         Tab {
             id,
@@ -210,20 +203,7 @@ impl<Message: TabMessage> Tab<Message> {
         self
     }
 
-    pub(super) fn internal<'a, Renderer>(self, idx: usize) -> TabInternal<'a, Message, Renderer>
+    pub(super) fn internal(self, idx: usize) -> TabInternal<'static, Message> {
-    where
-        Renderer: cosmic::iced_core::Renderer + 'a,
-        Renderer: cosmic::iced_core::text::Renderer<Font = Font>,
-        Renderer::Theme: ButtonStyleSheet<Style = theme::iced::Button>,
-        Renderer::Theme: ContainerStyleSheet,
-        Renderer::Theme: RuleStyleSheet<Style = theme::Rule>,
-        Renderer::Theme: TextStyleSheet,
-        Message: 'a,
-        widget::Button<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
-        widget::Container<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
-        widget::Text<'a, Renderer>: Into<Element<'a, Message, Renderer>>,
-        Icon: Into<Element<'a, Message, Renderer>>,
-    {
         let mut close_button = from_name("window-close-symbolic")
             .size(16)
             .prefer_svg(true)
@@ -238,19 +218,17 @@ impl<Message: TabMessage> Tab<Message> {
         let items = vec![
             widget::vertical_rule(4).style(self.rule_theme).into(),
             self.app_icon
+                .clone()
                 .apply(widget::container)
                 .height(Length::Fill)
                 .width(Length::Shrink)
                 .padding([2, 4])
                 .center_y()
                 .into(),
-            Element::<'a, Message, Renderer>::new(
+            cosmic::Element::<Message>::new(
-                text(self.title)
+                tab_text(self.title)
-                    .size(14)
                     .font(self.font)
-                    .horizontal_alignment(alignment::Horizontal::Left)
+                    .font_size(14.0)
-                    .vertical_alignment(alignment::Vertical::Center)
-                    .apply(tab_text)
                     .background(
                         self.background_theme
                             .background_color(&cosmic::theme::active()),
@@ -287,22 +265,17 @@ const MIN_TAB_WIDTH: i32 = 38;
 const TEXT_BREAKPOINT: i32 = 44;
 const CLOSE_BREAKPOINT: i32 = 125;
 
-pub(super) struct TabInternal<'a, Message: TabMessage, Renderer> {
+pub(super) struct TabInternal<'a, Message: TabMessage> {
     id: Id,
     idx: usize,
     active: bool,
     background: theme::Container,
-    elements: Vec<Element<'a, Message, Renderer>>,
+    elements: Vec<cosmic::Element<'a, Message>>,
     press_message: Option<Message>,
     right_click_message: Option<Message>,
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for TabInternal<'a, Message, Renderer>
+impl<'a, Message: TabMessage> Widget<Message, cosmic::Renderer> for TabInternal<'a, Message> {
-where
-    Renderer: cosmic::iced_core::Renderer,
-    Renderer::Theme: ContainerStyleSheet<Style = theme::Container>,
-    Message: TabMessage,
-{
     fn id(&self) -> Option<Id> {
         Some(self.id.clone())
     }
@@ -312,7 +285,7 @@ where
     }
 
     fn diff(&mut self, tree: &mut Tree) {
-        tree.diff_children(&mut self.elements)
+        tree.diff_children(&mut self.elements);
     }
 
     fn width(&self) -> Length {
@@ -323,7 +296,7 @@ where
         Length::Fill
     }
 
-    fn layout(&self, tree: &mut Tree, renderer: &Renderer, limits: &Limits) -> Node {
+    fn layout(&self, tree: &mut Tree, renderer: &cosmic::Renderer, limits: &Limits) -> Node {
         let min_size = Size {
             height: TAB_HEIGHT as f32,
             width: if self.active {
@@ -366,7 +339,7 @@ where
         &self,
         tree: &mut Tree,
         layout: Layout<'_>,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
         operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
     ) {
         operation.container(None, layout.bounds(), &mut |operation| {
@@ -378,7 +351,7 @@ where
                     child
                         .as_widget()
                         .operate(state, layout, renderer, operation);
-                })
+                });
         });
     }
 
@@ -388,7 +361,7 @@ where
         event: event::Event,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
         clipboard: &mut dyn Clipboard,
         shell: &mut Shell<'_, Message>,
         viewport: &Rectangle,
@@ -449,7 +422,7 @@ where
         layout: Layout<'_>,
         cursor: mouse::Cursor,
         viewport: &Rectangle,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
     ) -> mouse::Interaction {
         self.elements
             .iter()
@@ -467,13 +440,14 @@ where
     fn draw(
         &self,
         tree: &Tree,
-        renderer: &mut Renderer,
+        renderer: &mut cosmic::Renderer,
-        theme: &Renderer::Theme,
+        theme: &cosmic::Theme,
         renderer_style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
         viewport: &Rectangle,
     ) {
+        use cosmic::widget::container::StyleSheet;
         let style = theme.appearance(&self.background);
 
         draw_background(renderer, &style, layout.bounds());
@@ -504,8 +478,8 @@ where
         &'b mut self,
         tree: &'b mut Tree,
         layout: Layout<'_>,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, cosmic::Renderer>> {
         overlay::from_children(&mut self.elements, tree, layout, renderer)
     }
 }

src/shell/element/stack/tab_text.rs

@@ -1,48 +1,48 @@
+use std::hash::{Hash, Hasher};
+
 use cosmic::{
-    iced::Element,
+    iced::{alignment, Point},
     iced_core::{
         gradient,
         layout::{Layout, Limits, Node},
         mouse::Cursor,
         renderer::{self, Renderer as IcedRenderer},
-        widget::{Tree, Widget},
+        text::{LineHeight, Paragraph, Renderer as TextRenderer, Shaping},
-        Background, Color, Degrees, Gradient, Length, Point, Rectangle, Size,
+        widget::{tree, Tree, Widget},
+        Background, Color, Degrees, Gradient, Length, Rectangle, Size, Text,
     },
-    iced_widget::text::StyleSheet as TextStyleSheet,
 };
 
-pub struct TabText<'a, Message, Renderer>
+/// Text in a stack tab with an overflow gradient.
-where
+pub fn tab_text(text: String) -> TabText {
-    Renderer: IcedRenderer,
+    TabText::new(text, Color::TRANSPARENT)
-    Renderer::Theme: TextStyleSheet,
+}
-{
+
-    text: Element<'a, Message, Renderer>,
+struct LocalState {
+    text_hash: u64,
+    paragraph: <cosmic::Renderer as TextRenderer>::Paragraph,
+    overflowed: bool,
+}
+
+/// Text in a stack tab with an overflow gradient.
+pub struct TabText {
+    text: String,
     background: Color,
+    font: cosmic::font::Font,
+    font_size: f32,
     height: Length,
     width: Length,
 }
 
-pub fn tab_text<'a, Message, Renderer>(
+impl TabText {
-    text: impl Into<Element<'a, Message, Renderer>>,
+    pub fn new(text: String, background: Color) -> Self {
-) -> TabText<'a, Message, Renderer>
-where
-    Renderer: IcedRenderer,
-    Renderer::Theme: TextStyleSheet,
-{
-    TabText::new(text, Color::TRANSPARENT)
-}
-
-impl<'a, Message, Renderer> TabText<'a, Message, Renderer>
-where
-    Renderer: IcedRenderer,
-    Renderer::Theme: TextStyleSheet,
-{
-    pub fn new(text: impl Into<Element<'a, Message, Renderer>>, background: Color) -> Self {
         TabText {
             width: Length::Shrink,
             height: Length::Shrink,
             background,
-            text: text.into(),
+            font: cosmic::font::DEFAULT,
+            font_size: 14.0,
+            text,
         }
     }
 
@@ -51,6 +51,16 @@ where
         self
     }
 
+    pub fn font(mut self, font: cosmic::font::Font) -> Self {
+        self.font = font;
+        self
+    }
+
+    pub fn font_size(mut self, font_size: f32) -> Self {
+        self.font_size = font_size;
+        self
+    }
+
     pub fn width(mut self, width: impl Into<Length>) -> Self {
         let width = width.into();
         self.width = width;
@@ -62,13 +72,40 @@ where
         self.height = height;
         self
     }
+
+    fn create_hash(&self) -> u64 {
+        let mut hasher = std::collections::hash_map::DefaultHasher::new();
+        self.text.hash(&mut hasher);
+        hasher.finish()
+    }
+
+    fn create_paragraph(&self) -> <cosmic::Renderer as TextRenderer>::Paragraph {
+        <cosmic::Renderer as TextRenderer>::Paragraph::with_text(Text {
+            content: &self.text,
+            size: cosmic::iced_core::Pixels(self.font_size),
+            bounds: Size::INFINITY,
+            font: self.font,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::Center,
+            shaping: Shaping::Advanced,
+            line_height: LineHeight::default(),
+        })
+    }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for TabText<'a, Message, Renderer>
+impl<Message> Widget<Message, cosmic::Renderer> for TabText {
-where
+    fn tag(&self) -> tree::Tag {
-    Renderer: IcedRenderer,
+        tree::Tag::of::<LocalState>()
-    Renderer::Theme: TextStyleSheet,
+    }
-{
+
+    fn state(&self) -> tree::State {
+        tree::State::new(LocalState {
+            text_hash: self.create_hash(),
+            paragraph: self.create_paragraph(),
+            overflowed: false,
+        })
+    }
+
     fn width(&self) -> Length {
         self.width
     }
@@ -76,86 +113,77 @@ where
         self.height
     }
 
-    fn children(&self) -> Vec<Tree> {
+    fn layout(&self, tree: &mut Tree, _renderer: &cosmic::Renderer, limits: &Limits) -> Node {
-        vec![Tree::new(&self.text)]
+        let limits = limits.width(self.width).height(self.height);
+
+        let state = tree.state.downcast_mut::<LocalState>();
+        let text_bounds = state.paragraph.min_bounds();
+        state.overflowed = limits.max().width < text_bounds.width;
+        let actual_size = limits.resolve(text_bounds);
+
+        Node::new(actual_size)
     }
 
     fn diff(&mut self, tree: &mut Tree) {
-        tree.diff_children(std::slice::from_mut(&mut self.text))
+        // If the text changes, update the paragraph.
-    }
+        let state = tree.state.downcast_mut::<LocalState>();
-
+        let text_hash = self.create_hash();
-    fn layout(&self, tree: &mut Tree, renderer: &Renderer, limits: &Limits) -> Node {
+        if state.text_hash != text_hash {
-        let limits = limits.width(self.width).height(self.height);
+            state.text_hash = text_hash;
-        let child_limits = Limits::new(
+            state.paragraph = self.create_paragraph();
-            Size::new(limits.min().width, limits.min().height - 4.),
+        }
-            Size::new(limits.max().width * 2., limits.max().height - 4.),
-        );
-        let mut content =
-            self.text
-                .as_widget()
-                .layout(&mut tree.children[0], renderer, &child_limits);
-        content.move_to(Point::new(0., 2.));
-        let size = limits.resolve(content.size());
-
-        Node::with_children(size, vec![content])
     }
 
     fn draw(
         &self,
         tree: &Tree,
-        renderer: &mut Renderer,
+        renderer: &mut cosmic::Renderer,
-        theme: &Renderer::Theme,
+        _theme: &cosmic::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
-        cursor: Cursor,
+        _cursor: Cursor,
         _viewport: &Rectangle,
     ) {
         let bounds = layout.bounds();
-        let content_layout = layout.children().next().unwrap();
+        let state = tree.state.downcast_ref::<LocalState>();
 
         renderer.with_layer(bounds, |renderer| {
-            self.text.as_widget().draw(
+            renderer.fill_paragraph(
-                &tree.children[0],
+                &state.paragraph,
-                renderer,
+                Point::new(bounds.x, bounds.y + bounds.height / 2.0),
-                theme,
+                style.text_color,
-                style,
+                bounds,
-                content_layout,
-                cursor,
-                &bounds,
             );
         });
 
-        let gradient_bounds = Rectangle {
+        if state.overflowed {
-            x: (bounds.x + bounds.width - 24.).max(bounds.x),
+            let gradient_bounds = Rectangle {
-            width: 24.0_f32.min(bounds.width),
+                x: (bounds.x + bounds.width - 24.).max(bounds.x),
-            ..bounds
+                width: 24.0_f32.min(bounds.width),
-        };
+                ..bounds
+            };
 
-        let mut transparent_background = self.background;
+            let mut transparent_background = self.background;
-        transparent_background.a = 0.0;
+            transparent_background.a = 0.0;
-        renderer.fill_quad(
+            renderer.fill_quad(
-            renderer::Quad {
+                renderer::Quad {
-                bounds: gradient_bounds,
+                    bounds: gradient_bounds,
-                border_radius: 0.0.into(),
+                    border_radius: 0.0.into(),
-                border_width: 0.0,
+                    border_width: 0.0,
-                border_color: Color::TRANSPARENT,
+                    border_color: Color::TRANSPARENT,
-            },
+                },
-            Background::Gradient(Gradient::Linear(
+                Background::Gradient(Gradient::Linear(
-                gradient::Linear::new(Degrees(90.))
+                    gradient::Linear::new(Degrees(90.))
-                    .add_stop(0.0, transparent_background)
+                        .add_stop(0.0, transparent_background)
-                    .add_stop(1.0, self.background),
+                        .add_stop(1.0, self.background),
-            )),
+                )),
-        );
+            );
+        }
     }
 }
 
-impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>> for TabText<'a, Message, Renderer>
+impl<Message: 'static> From<TabText> for cosmic::Element<'_, Message> {
-where
+    fn from(value: TabText) -> Self {
-    Renderer: IcedRenderer + 'a,
+        Self::new(value)
-    Renderer::Theme: TextStyleSheet,
-    Message: 'a,
-{
-    fn into(self) -> Element<'a, Message, Renderer> {
-        Element::new(self)
     }
 }

src/shell/element/stack/tabs.rs

@@ -1,6 +1,5 @@
 use super::tab::{Tab, TabBackgroundTheme, TabMessage, TabRuleTheme, MIN_ACTIVE_TAB_WIDTH};
 use cosmic::{
-    font::Font,
     iced::{id::Id, widget, Element},
     iced_core::{
         event,
@@ -11,19 +10,15 @@ use cosmic::{
                 scrollable::{AbsoluteOffset, RelativeOffset},
                 Operation, OperationOutputWrapper, Scrollable,
             },
-            text::StyleSheet as TextStyleSheet,
             tree::{self, Tree},
             Widget,
         },
-        Background, Clipboard, Color, Length, Point, Rectangle, Shell, Size, Vector,
+        Background, Clipboard, Color, Length, Point, Rectangle, Renderer, Shell, Size, Vector,
-    },
-    iced_style::{
-        button::StyleSheet as ButtonStyleSheet, container::StyleSheet as ContainerStyleSheet,
-        rule::StyleSheet as RuleStyleSheet,
     },
+    iced_style::container::StyleSheet as ContainerStyleSheet,
     iced_widget::container::draw_background,
     theme,
-    widget::{icon::from_name, Icon},
+    widget::icon::from_name,
     Apply,
 };
 use keyframe::{
@@ -35,12 +30,8 @@ use std::{
     time::{Duration, Instant},
 };
 
-pub struct Tabs<'a, Message, Renderer>
+pub struct Tabs<'a, Message> {
-where
+    elements: Vec<cosmic::Element<'a, Message>>,
-    Renderer: cosmic::iced_core::Renderer,
-    Renderer::Theme: RuleStyleSheet,
-{
-    elements: Vec<Element<'a, Message, Renderer>>,
     id: Option<Id>,
     height: Length,
     width: Length,
@@ -118,18 +109,9 @@ impl Offset {
 const SCROLL_ANIMATION_DURATION: Duration = Duration::from_millis(200);
 const TAB_ANIMATION_DURATION: Duration = Duration::from_millis(150);
 
-impl<'a, Message, Renderer> Tabs<'a, Message, Renderer>
+impl<'a, Message> Tabs<'a, Message>
 where
-    Renderer: cosmic::iced_core::Renderer + 'a,
+    Message: TabMessage + 'static,
-    Renderer: cosmic::iced_core::text::Renderer<Font = Font>,
-    Renderer::Theme: ButtonStyleSheet<Style = theme::iced::Button>,
-    Renderer::Theme: ContainerStyleSheet<Style = theme::Container>,
-    Renderer::Theme: RuleStyleSheet<Style = theme::Rule>,
-    Renderer::Theme: TextStyleSheet,
-    Message: TabMessage + 'a,
-    widget::Button<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
-    widget::Container<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
-    Icon: Into<Element<'a, Message, Renderer>>,
 {
     pub fn new(
         tabs: impl IntoIterator<Item = Tab<Message>>,
@@ -322,10 +304,8 @@ impl State {
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for Tabs<'a, Message, Renderer>
+impl<'a, Message> Widget<Message, cosmic::Renderer> for Tabs<'a, Message>
 where
-    Renderer: cosmic::iced_core::Renderer,
-    Renderer::Theme: ContainerStyleSheet<Style = theme::Container> + RuleStyleSheet,
     Message: TabMessage,
 {
     fn width(&self) -> Length {
@@ -348,7 +328,7 @@ where
     }
 
     fn state(&self) -> tree::State {
-        tree::State::Some(Box::new(State::default()))
+        tree::State::Some(Box::<State>::default())
     }
 
     fn children(&self) -> Vec<Tree> {
@@ -356,10 +336,11 @@ where
     }
 
     fn diff(&mut self, tree: &mut Tree) {
-        tree.diff_children(&mut self.elements)
+        tree.diff_children(&mut self.elements);
     }
 
-    fn layout(&self, tree: &mut Tree, renderer: &Renderer, limits: &Limits) -> Node {
+    #[allow(clippy::too_many_lines)]
+    fn layout(&self, tree: &mut Tree, renderer: &cosmic::Renderer, limits: &Limits) -> Node {
         let limits = limits.width(self.width).height(self.height);
 
         // calculate the smallest possible size
@@ -379,7 +360,7 @@ where
         // sum up
         let min_size = nodes
             .iter()
-            .map(|node| node.size())
+            .map(Node::size)
             .fold(Size::new(0., 0.), |a, b| Size {
                 width: a.width + b.width,
                 height: a.height.max(b.height),
@@ -499,11 +480,12 @@ where
         }
     }
 
+    #[allow(clippy::too_many_lines)]
     fn draw(
         &self,
         tree: &Tree,
-        renderer: &mut Renderer,
+        renderer: &mut cosmic::Renderer,
-        theme: &<Renderer as cosmic::iced_core::Renderer>::Theme,
+        theme: &cosmic::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -637,8 +619,8 @@ where
                                     &offset_viewport,
                                 );
                             },
-                        )
+                        );
-                    })
+                    });
                 }
             });
         });
@@ -693,7 +675,7 @@ where
         &self,
         tree: &mut Tree,
         layout: Layout<'_>,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
         operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
     ) {
         let state = tree.state.downcast_mut::<State>();
@@ -717,17 +699,18 @@ where
                     child
                         .as_widget()
                         .operate(state, layout, renderer, operation);
-                })
+                });
         });
     }
 
+    #[allow(clippy::too_many_lines)]
     fn on_event(
         &mut self,
         tree: &mut Tree,
         event: event::Event,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
         clipboard: &mut dyn Clipboard,
         shell: &mut Shell<'_, Message>,
         viewport: &Rectangle,
@@ -775,10 +758,10 @@ where
                         return Some(Difference::Movement);
                     };
                     (a_bounds != b_bounds).then(|| {
-                        if a_bounds.position() != b_bounds.position() {
+                        if a_bounds.position() == b_bounds.position() {
-                            Difference::Movement
-                        } else {
                             Difference::Focus
+                        } else {
+                            Difference::Movement
                         }
                     })
                 })
@@ -857,12 +840,7 @@ where
         let mut internal_shell = Shell::new(&mut messages);
 
         let len = self.elements.len();
-        let result = if scrolling
+        let result = if scrolling && cursor.position().is_some_and(|pos| pos.x < bounds.x) {
-            && cursor
-                .position()
-                .map(|pos| pos.x < bounds.x)
-                .unwrap_or(false)
-        {
             self.elements[0..2]
                 .iter_mut()
                 .zip(&mut tree.children)
@@ -883,8 +861,7 @@ where
         } else if scrolling
             && cursor
                 .position()
-                .map(|pos| pos.x >= bounds.x + bounds.width)
+                .is_some_and(|pos| pos.x >= bounds.x + bounds.width)
-                .unwrap_or(false)
         {
             self.elements[len - 3..len]
                 .iter_mut()
@@ -928,7 +905,6 @@ where
                 .fold(event::Status::Ignored, event::Status::merge)
         };
 
-        std::mem::drop(internal_shell);
         for mut message in messages {
             if let Some(offset) = message.populate_scroll(AbsoluteOffset {
                 x: state.offset_x.absolute(bounds.width, content_bounds.width),
@@ -950,7 +926,7 @@ where
         layout: Layout<'_>,
         cursor: mouse::Cursor,
         viewport: &Rectangle,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
     ) -> mouse::Interaction {
         let state = tree.state.downcast_ref::<State>();
 
@@ -972,12 +948,7 @@ where
             ..bounds
         };
 
-        if scrolling
+        if scrolling && cursor.position().is_some_and(|pos| pos.x < bounds.x) {
-            && cursor
-                .position()
-                .map(|pos| pos.x < bounds.x)
-                .unwrap_or(false)
-        {
             self.elements[0..2]
                 .iter()
                 .zip(&tree.children)
@@ -991,8 +962,7 @@ where
         } else if scrolling
             && cursor
                 .position()
-                .map(|pos| pos.x >= bounds.x + bounds.width)
+                .is_some_and(|pos| pos.x >= bounds.x + bounds.width)
-                .unwrap_or(false)
         {
             self.elements[self.elements.len() - 3..self.elements.len()]
                 .iter()
@@ -1032,8 +1002,8 @@ where
         &'b mut self,
         tree: &'b mut Tree,
         layout: Layout<'_>,
-        renderer: &Renderer,
+        renderer: &cosmic::Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, cosmic::Renderer>> {
         overlay::from_children(&mut self.elements, tree, layout, renderer)
     }
 }