workspace: Add right border to pinned tabs only on scroll (#29405)

Before (scrolled state, bug):
<img width="392" alt="before - with scroll"
src="https://github.com/user-attachments/assets/5f62f050-41e0-4740-8f90-9822348eaa4b"
/>

After (scrolled state, bug fixed):
<img width="344" alt="after - with scroll"
src="https://github.com/user-attachments/assets/33003358-0009-4748-8a6e-642158114b82"
/>

Before (without scrolled state, as it is):
<img width="541" alt="before - without scroll"
src="https://github.com/user-attachments/assets/42487d61-7f7c-49a7-a087-da7faf5a0a89"
/>

After (without scrolled state, as it is):
<img width="462" alt="after - without scroll"
src="https://github.com/user-attachments/assets/738a4d24-3a89-466b-8976-2bf47cfeb0f5"
/>

cc @danilo-leal 

Release Notes:

- N/A
This commit is contained in:
Smit Barmase 2025-04-25 18:46:13 +05:30 committed by GitHub
parent ae37f3ca2e
commit 357e38b471
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -44,8 +44,8 @@ use theme::ThemeSettings;
use ui::{
ButtonSize, Color, ContextMenu, ContextMenuEntry, ContextMenuItem, DecoratedIcon, IconButton,
IconButtonShape, IconDecoration, IconDecorationKind, IconName, IconSize, Indicator, Label,
PopoverMenu, PopoverMenuHandle, Tab, TabBar, TabPosition, Tooltip, prelude::*,
right_click_menu,
PopoverMenu, PopoverMenuHandle, ScrollableHandle, Tab, TabBar, TabPosition, Tooltip,
prelude::*, right_click_menu,
};
use util::{ResultExt, debug_panic, maybe, truncate_and_remove_front};
@ -2661,12 +2661,22 @@ impl Pane {
tab_bar
}
})
.children(
pinned_tabs
.len()
.ne(&0)
.then(|| h_flex().children(pinned_tabs)),
)
.children(pinned_tabs.len().ne(&0).then(|| {
let content_width = self
.tab_bar_scroll_handle
.content_size()
.map(|content_size| content_size.size.width)
.unwrap_or(px(0.));
let viewport_width = self.tab_bar_scroll_handle.viewport().size.width;
// We need to check both because offset returns delta values even when the scroll handle is not scrollable
let is_scrollable = content_width > viewport_width;
let is_scrolled = self.tab_bar_scroll_handle.offset().x < px(0.);
h_flex()
.children(pinned_tabs)
.when(is_scrollable && is_scrolled, |this| {
this.border_r_1().border_color(cx.theme().colors().border)
})
}))
.child(
h_flex()
.id("unpinned tabs")