fix(web): align and space file search

[StiensWout]

Summary

• add a small top inset above the workspace file search so it is not flush with the file-tree boundary
• align the search field and tree with the Files panel 12px horizontal inset

Root cause

The tree search container had no top padding, while @pierre/trees also defaulted to a 16px inline inset rather than the Files panel header spacing.

Validation

• integrated web preview: search container has 4px top padding; the input begins 5px below the tree boundary including its existing 1px margin
• integrated web preview: search input and Files content share the same 12px horizontal inset
• vp fmt --check apps/web/src/components/files/FileBrowserPanel.tsx
• vp lint apps/web/src/components/files/FileBrowserPanel.tsx
• vp run --filter @t3tools/web typecheck
• git diff --check

This is a CSS-only layout change; file search behavior is unchanged.

Before:

After:

---

Note

Low Risk
CSS-only layout overrides in the file browser; no logic, API, or data-handling changes.

Overview
Visual alignment in the workspace Files panel: the @pierre/trees search field and tree no longer sit 4px inward relative to the header.

TREE_UNSAFE_CSS now sets --trees-padding-inline-override: 12px so the tree matches the header’s px-3 inset, and adds padding-block-start: 4px on [data-file-tree-search-container] for the search row spacing. Search behavior is unchanged.

^{Reviewed by Cursor Bugbot for commit 4b32601. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix alignment and spacing of file search in FileBrowserPanel

Adds 12px inline padding to the file tree via a CSS custom property and 4px top padding to the search container in FileBrowserPanel.tsx.

^{Macroscope summarized 4b32601.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d2365b84-6823-47b8-ad4f-d8e5fb7bbb05

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ 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.}

[macroscopeapp]

Approvability

Verdict: Approved

CSS-only changes adding padding and spacing to the file search UI component. Purely visual adjustments with no runtime behavior impact.

^{You can customize Macroscope's approvability policy. Learn more.}

Dismissing prior approval to re-evaluate 4b32601