Size the taskbar flyout to its content

[diogochaves]

While working on the repo my Claude auth got logged out, and I caught this visual bug in the taskbar-widget flyout: a bare strip of desktop showing under the "Open Ceiling" row.

Summary

The native taskbar-widget flyout (TaskbarFlyout.tsx) sized its window with Math.max(174, section.scrollHeight). Everything outside the .taskbar-flyout section is transparent (html, body, #root and .taskbar-flyout-frame are all background: transparent !important), so whenever the content measured under 174px the extra window height showed the desktop as a bare strip under the "Open Ceiling" row.

The shortest real layout hits it: header (52px) + providers padding (8px) + one Unavailable row (58px) + footer (43px) = 163px — i.e. exactly one provider whose last sync failed, which is what a signed-out Claude looks like. As soon as the row grows meters the content passes 174 and the strip vanishes, which is why it's easy to miss.

This drops the floor and sizes the window to the measured section. 174 stays only as a fallback for the no-layout case (matching FLYOUT_INITIAL_HEIGHT in shell/flyout_window.rs, which is unchanged) and can never inflate a real measurement.

Related issue

None — caught while working on the repo.

Affected areas

• Tray panel
• Settings UI
• Config file / settings persistence
• CLI
• Provider-specific behavior
• Installer / release packaging
• Startup / background behavior
• Documentation
• Other: native taskbar-widget flyout (apps/desktop-tauri/src/surfaces/TaskbarFlyout.tsx) — window sizing only. The TrayPanel surface is untouched (see reviewer notes).

Validation

• powershell.exe -ExecutionPolicy Bypass -NoProfile -File scripts\local-check.ps1 -Frontend — Frontend tests: 93 files / 741 tests passed; Frontend build: ✓ built; "Local checks passed."
• Rust / Tauri Rust tests, format, clippy — not run: the change is a single .tsx file, no Rust touched.
• For full pre-release validation — not a release.
• For installer/release changes — no packaging changes.
• Other:
  • npx vitest run src/surfaces/TaskbarFlyout — 13/13; npx tsc --noEmit — clean.
  • Live check in the real app (pnpm tauri dev), reproducing the signed-out state deterministically: CLAUDE_CONFIG_DIR pointed at an empty directory and HTTPS_PROXY=http://127.0.0.1:9 so the Claude sync fails with "Last sync failed". Opened the widget flyout and pixel-scanned the capture: panel rows y49–211, window ends at y211, drop shadow from y212 — no un-tinted strip. Same build with the change stashed via Vite HMR: window 183px outer vs 172px after (Tao adds an 8px invisible bottom border; the panel is 163px in both).

UI / tray proof

• Not applicable
• Visual proof attached
• Visual proof was not practical; manual validation and explanation attached

Before (strip under the footer is the desktop showing through the window):

After (window ends at the panel; what's below is the window's drop shadow on the wallpaper):

Notes for reviewers

• The diff is the floor removal plus a named fallback constant; nothing else changes. The fallback only applies when surfaceRef has no layout (scrollHeight is 0 or the ref is null), which doesn't happen after mount — the resize effect already waits for hasLoadedCache || visibleProviders.length > 0, and the window is built .visible(false) and revealed only after the first resize, so there is no visible frame at the fallback size.
• I checked whether TrayPanel has the same problem, since useTrayPanelLayout also floors the window (TRAY_OVERVIEW_MIN_HEIGHT = 200) over a height: auto surface and only the dense / user-sized modes stretch it with min-height: 100vh. It doesn't bite in practice: with one provider in an error state and no update banner the surface measures ~305px (window 311px outer), because the provider-grid row plus the five footer rows are ~200px of fixed chrome on their own. That surface also has no user-facing producer any more — only CODEXBAR_PROOF_MODE=trayPanel enters it. So no change there. If it ever gets a shorter layout, the one-line fix is min-height: 100vh on .menu-surface--tray (folding the dense rule into it); the measure pass already zeroes min-height inline, so it can't inflate the measurement, at the cost of the ResizeObserver re-firing each pass on short content — the same idle loop dense mode runs today.

Note

Size TaskbarFlyout component to its measured content

Updates the resize effect in TaskbarFlyout.tsx to use the measured scroll height when it is positive. Adds the FLYOUT_FALLBACK_HEIGHT constant (174px) and applies it only when the content cannot be measured or has zero height. Removes the previous unconditional 174px minimum height, allowing the flyout to shrink below 174px when content is smaller.

^{Macroscope summarized 48cd298.}

Summary by CodeRabbit

• Bug Fixes
  • Taskbar flyouts now resize to match their content more precisely.
  • Removed unnecessary extra vertical space when flyout content is shorter than the previous minimum height.
  • Flyouts retain a fallback height while content is still being measured.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 5b478889-e421-492b-99d1-8c1c6eca0840

📥 Commits

Reviewing files that changed from the base of the PR and between b39aa80 and 48cd298.

📒 Files selected for processing (1)

• apps/desktop-tauri/src/surfaces/TaskbarFlyout.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The taskbar flyout now sizes its window to the measured section content. It uses 174 pixels only when no layout measurement exists, instead of enforcing 174 pixels as a minimum height.

Changes

Taskbar flyout sizing

Layer / File(s)	Summary
Content-height resize behavior apps/desktop-tauri/src/surfaces/TaskbarFlyout.tsx	The resize handler uses Math.ceil(scrollHeight) for the window height. It applies FLYOUT_FALLBACK_HEIGHT only when the measured height is zero.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 48cd2

The taskbar flyout now fits its measured content rather than retaining unused transparent space, while preserving the initial fallback height before layout is available. No current merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: sizing the taskbar flyout to match its content.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}