Skip to content

fix(ui): keep Today Overview as a fixed dashboard #1329

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
appergb merged 1 commit into from
Nov 2, 2026
Merged

fix(ui): keep Today Overview as a fixed dashboard #1329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 4 additions & 6 deletions openless-all/app/src/components/FloatingShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,15 +542,13 @@ function FloatingShellBody({
// scrollbar appears only when it truly overflows.
// - Other tabs use the thin scrollbar too.
className="ol-thinscroll ol-scroll-fade"
// Overview is a fixed single-screen page (overflow hidden, never scrolls):
// no scrollbar gutter reserved.
// Overview is a fixed single-screen dashboard. Its cards own any internal
// scrolling; the page surface itself never becomes a scroll container.
style={{
flex: 1,
minHeight: 0,
// Overview is a fixed single-screen page: no scrolling; all dashboards
// fit one screen with heights distributed by Overview.tsx's internal
// flex; other pages keep the thin scrollbar.
overflow: 'auto',
overflow: displayTab === 'overview' ? 'hidden' : 'auto',
boxSizing: 'border-box',
padding: mobile
? '16px 16px calc(16px + env(safe-area-inset-bottom, 0px) + 56px)'
: displayTab === 'overview'
Expand Down
44 changes: 31 additions & 13 deletions openless-all/app/src/pages/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,17 +300,18 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
onOpenSettings?.(section, serviceView);

return (
// Single-screen fixed page: no scrolling, fills the height given by the shell, dashboards share
// one screen elastically; when the window is squeezed very short, the bottom row shrinks internally
// (the recent list scrolls internally) and the page itself shows no scrollbar.
// Single-screen fixed dashboard: the shell owns the viewport and cards own their
// internal scrolling. The page surface never grows a document scrollbar.
<div
style={{
display: 'flex',
flexDirection: 'column',
flex: 1,
height: '100%',
minHeight: 0,
minWidth: 0,
gap: 14,
gap: 12,
overflow: 'hidden',
}}
>
<PageHeader
Expand All @@ -330,7 +331,7 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
display: 'grid',
gridTemplateColumns:
mobile || setup.providers.length < 2 ? 'minmax(0, 1fr)' : 'repeat(2, minmax(0, 1fr))',
gap: 12,
gap: 10,
flexShrink: 0,
}}
>
Expand All @@ -355,7 +356,7 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
</div>

{/* Usage records: title + four metric cards as one group. */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, flexShrink: 0 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
<h2
style={{
fontSize: 13,
Expand All @@ -370,7 +371,7 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
style={{
display: 'grid',
gridTemplateColumns: mobile ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, minmax(0, 1fr))',
gap: 12,
gap: 8,
}}
>
<Metric
Expand Down Expand Up @@ -415,10 +416,10 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
style={{
display: 'grid',
gridTemplateColumns: mobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1.4fr)',
gap: 12,
flex: 1,
// Keep the chart readable; when the window is too short the page scrolls instead.
minHeight: mobile ? 0 : 260,
gap: 10,
flex: '1 1 0',
minHeight: 0,
overflow: 'hidden',
}}
>
<PeriodMetricsCard
Expand All @@ -433,7 +434,13 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {

<Card
padding={0}
style={{ display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}
style={{
display: 'flex',
flexDirection: 'column',
minWidth: 0,
minHeight: 0,
overflow: 'hidden',
}}
>
<div
style={{
Expand Down Expand Up @@ -656,7 +663,18 @@ function ActivityHeatmapCard({ activity }: { activity: ActivityDay[] }) {
};
}, [activity, i18n.resolvedLanguage, i18n.language]);
return (
<Card padding={12} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
<Card
padding={12}
style={{
display: 'flex',
flexDirection: 'column',
gap: 6,
minWidth: 0,
minHeight: 0,
flex: '0 1 132px',
overflow: 'hidden',
}}
>
<span
style={{
fontSize: 13,
Expand Down
Loading