Add upward-pointing arrow to tray panel

[robinebers]

Add a CSS-based caret above the panel that visually points toward the tray icon, similar to native macOS popovers. The arrow responds to theme changes automatically and is included in the window's auto-resize measurements. Also move the panel up 10px for better positioning relative to the tray bar.

• Adds .tray-arrow class with CSS border-triangle technique for borderless arrow
• Uses theme CSS variables for automatic light/dark mode support
• Moves containerRef to outer wrapper so arrow height is included in resize calculations
• Adjusts tray positioning padding from +8px to -8px to move panel up 10px total

🤖 Generated with Claude Code

---

Note

Low Risk
Low risk UI/layout change with minor window positioning tweak; primary risk is visual regressions or mis-sizing/clipping of the panel on different DPI/monitor setups.

Overview
Adds a macOS-style upward caret above the tray panel via a new CSS .tray-arrow, themed using existing --border/--card variables.

Updates the panel layout to include the arrow in resize measurements (moves containerRef to an outer wrapper and subtracts ARROW_OVERHEAD_PX from the content max height), and nudges the Tauri panel upward by flipping the tray padding from +8px to -8px in position_panel_at_tray_icon.

^{Written by Cursor Bugbot for commit 6228eca. This will update automatically on new commits. Configure here.}

---

Summary by cubic

Adds an upward-pointing caret above the tray panel to match macOS popovers. Raises the panel by 10px and includes the arrow in auto-resize.

• New Features

  • Adds CSS .tray-arrow that auto-adapts to light/dark via theme variables.

• Refactors

  • Moves containerRef to the outer wrapper so arrow height is measured.
  • Adjusts tray padding from +8px to -8px to position the panel higher.

^{Written for commit 6228eca. Summary will update on new commits.}

[macroscopeapp]

Render an upward-pointing tray arrow and raise the tray panel by 8×scale while reducing panel max height by 13px in src-tauri::panel::position_panel_at_tray_icon and App

Add a CSS-based upward arrow above the tray panel and adjust layout so the panel sits higher by 8×scale and its max height subtracts 13px; move containerRef to the outer wrapper in App.tsx and tweak y-offset in panel.rs.

📍Where to Start

Start with the y-position change in position_panel_at_tray_icon in panel.rs, then review the layout and ARROW_OVERHEAD_PX integration in App.tsx.

---

Macroscope summarized 6228eca.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2abd3db52b

ℹ️ 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".

[chatgpt-codex-connector]

Account for arrow height when capping panel

When content reaches the max-height cap, maxPanelHeightPx is applied to the inner panel, but the resize logic now measures the outer wrapper that also includes the new arrow and pt-1.5. That means desiredHeightLogical includes the arrow height, yet window height is still capped to maxHeightPhysical, while html/body/#root have overflow: hidden. In the max-height scenario (e.g., long plugin list), the panel becomes taller than the window by the arrow height, so the bottom rows are clipped and cannot be scrolled to. Consider subtracting the arrow/padding height from the max panel height or moving the max-height constraint to the wrapper so the capped height includes the arrow.

Useful? React with 👍 / 👎.

[macroscopeapp]

🟢 Low

src/App.tsx:492

The new wrapper's pt-1.5 padding and .tray-arrow height aren't accounted for in maxPanelHeightPx. Consider subtracting the wrapper overhead from the inner card's maxHeight so the footer remains visible when content is tall.

🚀 Want me to fix this? Reply ex: "fix it for me".

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cubic-dev-ai]

1 issue found across 3 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="src/App.tsx">

<violation number="1" location="src/App.tsx:496">
P2: The `maxPanelHeightPx` is applied to the inner panel, but `containerRef` now measures the outer wrapper which includes the arrow (7px) and `pt-1.5` padding (6px). When content reaches max height, the total measured height exceeds the constrained window height by ~13px, causing the bottom content (footer) to be clipped since `overflow: hidden` is set on the root elements. Consider subtracting the arrow/padding overhead from `maxPanelHeightPx`, or move the max-height constraint to the outer wrapper.</violation>
</file>

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