fix(web): composer chip rings no longer clip at the editor edge

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

ELI5

When you click a chip at the start of the message box, the highlight around it got its edges cut off. The message box now has a little invisible breathing room, so the highlight shows in full without moving any text.

Problem

The composer editor is its own scroll container with no padding, so chips at the start of a line or on the first line sit flush against its edge. The node-selection ring on chips (file mentions, skills, chat references, context references) extends 3px outside the chip and the chip's focus ring 4px, and a scroll container clips anything painted past its padding box.

Fix

The editor gets 4px of padding cancelled by a -4px margin (-m-1 p-1), so text stays put while the scroll area gains room for both rings at their existing offsets. The container is a flow-root so the negative margin does not collapse through it and shift the placeholder. Min and max heights (default, approval state, settings font preview, and the mobile pending-answer bottom padding) grow by the 8px the margins take back, and the resting composer drops the vertical part, so every layout height is unchanged. Measured before and after: text, placeholder, container and card positions are identical in the expanded composer, the resting composer and the settings font preview.

UI Changes

Chat reference, node-selected at the start of a line:

Before	After

After, the same chip between words for comparison:

File mention, node-selected at the start of a line:

Before	After

Skill, focused after closing its popover:

Before	After

Made by Claude Opus 5.5 in Claude Code (T3 Code).

Summary by CodeRabbit

• Style
  • Adjusted the prompt editor’s spacing and height in the chat composer, including its pending-answer and approval layouts.
  • Updated the prompt editor’s sizing and positioning for a more consistent layout.
  • Increased the minimum and maximum heights of prompt previews in settings.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 8a0f8ff8-5065-4787-b502-cefefbfa2951

📥 Commits

Reviewing files that changed from the base of the PR and between 82720ce and 1e5e9ee.

📒 Files selected for processing (3)

• apps/web/src/components/ComposerPromptEditorTiptap.tsx
• apps/web/src/components/chat/ChatComposer.tsx
• apps/web/src/components/settings/SettingsFontPreviews.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

Prompt editor spacing and height classes change in the editor, chat composer, and font preview. The editor wrapper also adds flow-root.

Changes

Prompt editor layout

Layer / File(s)	Summary
Adjust prompt editor spacing and heights apps/web/src/components/ComposerPromptEditorTiptap.tsx, apps/web/src/components/chat/ChatComposer.tsx, apps/web/src/components/settings/SettingsFontPreviews.tsx	The editor spacing and height classes change, and its wrapper adds flow-root. The chat composer resets resting vertical margins and padding, increases mobile pending-answer bottom padding, and raises the approval-state minimum height. The font preview increases its minimum and maximum heights.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: utkarshusername

Merge Risk: ⚪ Minimal · up to 1e5e9

The composer layout change preserves the inspected sizing behavior and keeps chip outlines within the scroll area; no merge-blocking issue was found.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly summarizes the main change: preventing composer chip rings from clipping at the editor edge.
Description check	✅ Passed	The description clearly explains the problem, fix, layout impact, and UI changes. It includes before-and-after screenshots. It does not use the template's exact "What Changed" and "Why" headings and o…

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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

[macroscopeapp]

Approvability

Verdict: Approved at 1e5e9ee

Macroscope's review found this PR approvable — This is a narrowly scoped UI layout fix that adjusts composer padding, height, and containment so chip rings are not clipped, while preserving editor behavior and data handling. The settings change only keeps the font preview aligned with the updated editor geometry.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 82720ce

Dismissing prior approval to re-evaluate 1e5e9ee