Skip to content

fix(hostinfo): a narrow Host Inspector scrolls sideways #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Atreus-X merged 4 commits into from
Sep 30, 2026
Merged

fix(hostinfo): a narrow Host Inspector scrolls sideways #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de4ca59
fix(hostinfo): a narrow Host Inspector scrolls sideways instead of tr…
Atreus-X Sep 29, 2026
aef5f50
fix(ui): horizontal scrollbars stay visible and readable
Atreus-X Sep 30, 2026
3d4c455
fix(ui): put the strong horizontal handle colour in app.scss
Atreus-X Sep 30, 2026
faf64ee
fix: host inspector/fleet root must shrink to the block so the horizo…
Atreus-X Sep 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/app/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,11 @@ body {
--os-handle-bg-active: var(--scrollbar-thumb-active-color);
}

/* unlayered, so it beats Tailwind utilities; a utility class can't override the rule above */
.scrollarea-strong .os-scrollbar {
--os-handle-bg: var(--scrollbar-thumb-hover-color);
}

.scrollbar-hide-until-hover {
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
Expand Down
10 changes: 8 additions & 2 deletions frontend/app/element/scrollarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,16 @@ export function ScrollArea({
}) {
return (
<OverlayScrollbarsComponent
className={cn("min-h-0", className)}
className={cn(
"min-h-0",
// the default 15% handle is nearly invisible on a dark panel, and a bar that only shows on
// hover is easy to miss when the content is wider than the block
horizontal && "scrollarea-strong",
className
)}
options={{
overflow: { x: horizontal ? "scroll" : "hidden", y: "scroll" },
scrollbars: { autoHide: "leave", autoHideDelay: 800, clickScroll: true },
scrollbars: { autoHide: horizontal ? "never" : "leave", autoHideDelay: 800, clickScroll: true },
}}
defer
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/view/fleet/fleet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ export const FleetView = memo(({ model }: ViewComponentProps<FleetViewModel>) =>
const [query, setQuery] = useState("");
const shown = hosts.filter((h) => !query || h.toLowerCase().includes(query.toLowerCase()));
return (
<div className="flex h-full min-h-0 flex-col">
<div className="flex h-full w-full min-h-0 min-w-0 flex-col">
<div className="flex flex-wrap items-center gap-3 border-b border-border px-3 py-2">
<div className="relative">
<i className="fa-solid fa-magnifying-glass pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-[11px] text-muted" />
Expand Down
4 changes: 2 additions & 2 deletions frontend/app/view/hostinfo/hostinfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ const SectionBody = memo(({ model, data }: { model: HostInfoViewModel; data: Hos
const props = { model, data, changes };
return (
<ScrollArea className="min-w-0 flex-1" horizontal>
<div className="p-3">
<div className="min-w-[640px] p-3">
{sectionError && <div className="mb-2 text-xs text-error">{sectionError}</div>}
{active === "overview" && <OverviewSection {...props} />}
{active === "network" && <NetworkSection {...props} />}
Expand Down Expand Up @@ -305,7 +305,7 @@ export const HostInfoView = memo(({ model }: ViewComponentProps<HostInfoViewMode
);
}
return (
<div className="flex h-full min-h-0 flex-col">
<div className="flex h-full w-full min-h-0 min-w-0 flex-col">
<VitalsStrip model={model} data={data} />
<ActionStrip model={model} />
{(error || notConnected || paused) && (
Expand Down