fix: keep tray panel height stable when provider content changes by prayzey · Pull Request #342 · robinebers/openusage

prayzey · 2026-04-04T21:57:34Z

Description

Fixes the tray panel resizing vertically when switching between providers or views with different amounts of content.

Before this change, the window height followed the current content height, so short states and longer states made the whole panel jump up and down.

This change keeps a stable preferred panel height and lets the content scroll inside the panel when needed.

Related Issue

N/A

Related to the general sizing/compactness discussion in #106, but this specifically fixes panel height jitter rather than adding a compact mode.

Type of Change

Testing

I ran bun run build and it succeeded
I ran bun run test and all tests pass
I added regression tests for stable panel height and small-screen clamping

Screenshots

Before: panel height changes depending on which provider state is visible

After: panel height stays stable and only the inner content scrolls

Checklist

I read CONTRIBUTING.md
My PR targets the main branch
I did not introduce new dependencies without justification

Summary by cubic

Keeps the tray panel height stable across provider/view changes so the window stops jumping. Uses a preferred 560px height with in-panel scrolling, clamps for small monitors, and refines the scrollbar and layout for better spacing.

Bug Fixes
- Stable panelHeightPx with a fixed card height in AppShell; dedup window resizes; recalc on DPI/scale changes and window moves.
- Clamp height to monitor bounds with a small minimum; content scrolls inside the panel.
- Thin .panel-scroll on the outer edge; padding moved to an inner content wrapper; footer now has px-3 to match the gutter; updated styles and tests.

^{Written for commit 4410fb4. Summary will update on new commits.}

cubic-dev-ai

1 issue found across 3 files

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/hooks/app/use-panel.ts">

<violation number="1" location="src/hooks/app/use-panel.ts:115">
P2: Panel height clamp is not recalculated on monitor/scale context changes, so fixed-height tray can remain too tall after moving to a smaller display.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.}

src/hooks/app/use-panel.ts

validatedev · 2026-04-04T22:23:20Z

@codex review

chatgpt-codex-connector · 2026-04-04T22:26:44Z

Codex Review: Didn't find any major issues. Swish!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

validatedev

One issue I have seen behaviorally that users expect a scrollbar to appear while scrolling, similar to how browsers handle it, and I don't have such thing while testing your build. Not sure whether it should stay visible at all times or only show during active scrolling. Nice thinking though, thanks!

Copilot

Pull request overview

This PR stabilizes the Tauri tray panel height across provider/view changes to prevent vertical “jitter,” using a preferred fixed panel height and relying on inner scrolling when content overflows.

Changes:

Introduces a preferred panel height (560px) with monitor-based clamping in usePanel, instead of sizing the window to content height.
Updates AppShell to use a fixed height (and maxHeight) for the card container derived from the computed panel height.
Adds regression tests for preferred-height sizing and small-monitor clamping.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/hooks/app/use-panel.ts	Computes a stable `panelHeightPx` (preferred + clamped) and resizes the Tauri window accordingly.
src/components/app/app-shell.tsx	Applies a fixed card height based on `panelHeightPx` so overflow scrolls inside the panel.
src/App.test.tsx	Adds assertions for preferred height (560px) and clamping behavior on smaller monitors.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-04T22:28:16Z

src/hooks/app/use-panel.ts

+      // Keep the tray panel visually stable; scrolling should happen inside the shell.
+      const nextPanelHeightLogical = Math.max(1, Math.min(PANEL_PREFERRED_HEIGHT, maxHeightLogical))
+
+      if (panelHeightPxRef.current !== nextPanelHeightLogical) {
+        panelHeightPxRef.current = nextPanelHeightLogical
+        setPanelHeightPx(nextPanelHeightLogical)
      }

-      const desiredHeightPhysical = Math.ceil(desiredHeightLogical * factor)
-      const height = Math.ceil(Math.min(desiredHeightPhysical, maxHeightPhysical!))
+      const height = Math.ceil(Math.min(nextPanelHeightLogical * factor, maxHeightPhysical!))


resizeWindow now sets a fixed preferred height, but the effect still reruns on activeView/displayPlugins changes. Since displayPlugins updates frequently, this can cause repeated currentMonitor() calls and setSize() calls even when the target size hasn't changed. Consider removing displayPlugins from the dependency list (or running this effect only on mount) and/or caching the last {width,height} in a ref to skip no-op setSize calls.

Copilot · 2026-04-04T22:28:16Z

src/hooks/app/use-panel.ts

+      // Keep the tray panel visually stable; scrolling should happen inside the shell.
+      const nextPanelHeightLogical = Math.max(1, Math.min(PANEL_PREFERRED_HEIGHT, maxHeightLogical))
+


nextPanelHeightLogical can be clamped below the shell's non-content overhead (padding + arrow), especially on very small monitors or high devicePixelRatio. In that case the UI will be clipped because AppShell enforces a minimum card height of 1px. Consider enforcing a minimum panel height that accounts for the shell overhead (or moving the overhead constant into the sizing logic) so the total window height can always fit the chrome.

Copilot · 2026-04-04T22:28:17Z

src/components/app/app-shell.tsx

+  const cardHeightPx = panelHeightPx ? Math.max(1, panelHeightPx - ARROW_OVERHEAD_PX) : null

  return (
    <div ref={containerRef} className="flex flex-col items-center p-6 pt-1.5 bg-transparent">
      <div className="tray-arrow" />
      <div
        className="relative bg-card rounded-xl overflow-hidden select-none w-full border shadow-lg flex flex-col"
-        style={maxPanelHeightPx ? { maxHeight: `${maxPanelHeightPx - ARROW_OVERHEAD_PX}px` } : undefined}
+        style={cardHeightPx ? { height: `${cardHeightPx}px`, maxHeight: `${cardHeightPx}px` } : undefined}
      >


cardHeightPx is derived from panelHeightPx using a fixed ARROW_OVERHEAD_PX, but cardHeightPx is clamped to at least 1px. If panelHeightPx is ever < ARROW_OVERHEAD_PX (possible with small monitors/high DPI), the card + overhead will no longer fit in the window and the top/bottom chrome may be clipped. Consider clamping panelHeightPx to at least ARROW_OVERHEAD_PX + 1 (or computing these values in one place) to keep the layout internally consistent.

Copilot · 2026-04-04T22:28:17Z

src/App.test.tsx

+  it("keeps a stable preferred panel height when content is shorter", async () => {
+    state.isTauriMock.mockReturnValue(true)
+    state.currentMonitorMock.mockResolvedValueOnce({ size: { height: 1000 } })
+    render(<App />)
+
+    await waitFor(() =>
+      expect(state.setSizeMock).toHaveBeenCalledWith(
+        expect.objectContaining({ width: 400, height: 560 })
+      )
+    )
+  })
+
+  it("clamps the stable panel height to small monitors", async () => {
+    state.isTauriMock.mockReturnValue(true)
+    state.currentMonitorMock.mockResolvedValueOnce({ size: { height: 500 } })
+    render(<App />)
+
+    await waitFor(() =>
+      expect(state.setSizeMock).toHaveBeenCalledWith(
+        expect.objectContaining({ width: 400, height: 400 })
+      )
+    )
+  })


These tests use currentMonitorMock.mockResolvedValueOnce(...), but usePanel can call currentMonitor() multiple times (initial call + subsequent ResizeObserver callbacks). Using mockResolvedValueOnce makes the tests fragile and can mask regressions in later resize calls. Prefer mockResolvedValue(...) (or assert on the last setSize call / no subsequent call exceeding the clamp).

Copilot · 2026-04-04T22:28:17Z

src/App.test.tsx

+  it("keeps a stable preferred panel height when content is shorter", async () => {
+    state.isTauriMock.mockReturnValue(true)
+    state.currentMonitorMock.mockResolvedValueOnce({ size: { height: 1000 } })
+    render(<App />)
+
+    await waitFor(() =>
+      expect(state.setSizeMock).toHaveBeenCalledWith(
+        expect.objectContaining({ width: 400, height: 560 })
+      )
+    )
+  })


Test name/intent mismatch: "keeps a stable preferred panel height when content is shorter" doesn't currently set up a short-content scenario or verify stability across a provider/view change; it only asserts the initial resize target. Either adjust the name to match what’s asserted or extend the test to simulate a content/view change and confirm the height remains unchanged.

validatedev · 2026-04-04T22:54:51Z

Thanks, but the scrollbar is not in the correct place.

prayzey · 2026-04-04T23:01:45Z

@validatedev How is this ? moved it further away from the content. Unless you want it in a different area. Thanks

validatedev · 2026-04-04T23:17:55Z

Thanks again for the quick fix and the first iteration of the implementation, but I still feel like it shouldn't look like that. As you can see, there's no distance between the scroll bar and the content, and it does not appeal to me. Don't think that I'm being unnecessarily picky, I am trying to make sure the app looks right. The scroll bar on other apps tends to be in the rightmost area. I feel like we should have something like that instead:

prayzey · 2026-04-04T23:47:56Z

Thanks for the feedback! How does this feel?

validatedev · 2026-04-05T10:39:41Z

Hmm, now we have a gap on the right even without any scrollbar, which doesn’t feel ideal. But thanks, I appreciate your work. Let me work on it as well.

validatedev · 2026-04-05T11:44:14Z

I'm still working on it but I have eliminated all of the padding problems.

davidarny · 2026-04-05T20:53:23Z

@prayzey @validatedev guys make sure to support different macos scrollbar modes. maybe that's a root of your issues?

However not sure if it works the same way in tauri app as it does in browser. So basically in first two options scrollbar is overlayed, in last option a space for scrollbar will be added.

CleanShot.2026-04-05.at.23.54.29.mp4

prayzey · 2026-04-06T08:42:11Z

Thanks for pointing that out.
Yes it does actually change the behaviour a bit.

How would you suggest we move forward so that the design can be consistent? Thank you.

prayzey added 2 commits April 4, 2026 20:18

Stabilize tray panel height so provider changes stop shifting the UI

5591393

Document stable tray height choice to make the panel sizing fix clearer

c484ada

github-actions bot added the core label Apr 4, 2026

prayzey marked this pull request as ready for review April 4, 2026 22:10

prayzey requested review from davidarny, robinebers and validatedev as code owners April 4, 2026 22:10

cubic-dev-ai bot reviewed Apr 4, 2026

View reviewed changes

src/hooks/app/use-panel.ts Outdated Show resolved Hide resolved

validatedev requested a review from Copilot April 4, 2026 22:23

Copilot started reviewing on behalf of validatedev April 4, 2026 22:23 View session

validatedev requested changes Apr 4, 2026

View reviewed changes

Copilot AI reviewed Apr 4, 2026

View reviewed changes

Refine stable panel sizing for review feedback and monitor changes

a2ebde8

Polish panel scrollbar styling and spacing for the new scroll layout

2af6d0c

prayzey added 2 commits April 5, 2026 00:37

Move the panel scrollbar toward the outer edge without crowding content

b224ce8

Align the footer spacing with the updated panel content gutter

d30beff

Add more space between the scrollbar and the panel content

8255c65

refactor: change panel layout and scrollbar styling

4410fb4

		// Keep the tray panel visually stable; scrolling should happen inside the shell.
		const nextPanelHeightLogical = Math.max(1, Math.min(PANEL_PREFERRED_HEIGHT, maxHeightLogical))

Conversation

prayzey commented Apr 4, 2026 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Type of Change

Testing

Screenshots

Checklist

Summary by cubic

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

validatedev commented Apr 4, 2026

Uh oh!

chatgpt-codex-connector bot commented Apr 4, 2026

Uh oh!

validatedev left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

validatedev commented Apr 4, 2026

Uh oh!

prayzey commented Apr 4, 2026

Uh oh!

validatedev commented Apr 4, 2026

Uh oh!

prayzey commented Apr 4, 2026

Uh oh!

validatedev commented Apr 5, 2026

Uh oh!

validatedev commented Apr 5, 2026

Uh oh!

davidarny commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

prayzey commented Apr 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

prayzey commented Apr 4, 2026 •

edited by cubic-dev-ai bot

Loading

davidarny commented Apr 5, 2026 •

edited

Loading