fix(core): truncate long slide titles in the editor header#154
Conversation
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
@ridemountainpig is attempting to deploy a commit to the Yiwei Ho Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe PR restructures the editor header layout to enable long slide title truncation. The toolbar header simplifies from a ChangesEditor Header Refactor
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/app/routes/slide.tsx (1)
912-912: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick winAdd
min-w-0to the h1 for robust flex-based truncation.The h1 is a flex child (parent on line 911 has
display: flex) and only has thetruncateclass. For proper flex-based truncation, flex children needmin-width: 0to shrink below their content width—thetruncateclass providesoverflow: hiddenandtext-overflow: ellipsisbut does not setmin-width: 0. The established pattern (seehome.tsx:478) usesmin-w-0 truncatetogether.♻️ Proposed fix
- <h1 className="truncate font-heading text-[13.5px] font-semibold tracking-[-0.01em]"> + <h1 className="min-w-0 truncate font-heading text-[13.5px] font-semibold tracking-[-0.01em]"> {title} </h1>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/app/routes/slide.tsx` at line 912, The h1 element with className "truncate font-heading text-[13.5px] font-semibold tracking-[-0.01em]" is a flex child and needs a min-width reset for proper truncation; update that h1's className to include "min-w-0" (i.e., use "min-w-0 truncate ...") so the flex item can shrink and the existing truncate/text-overflow behavior works correctly.
🧹 Nitpick comments (1)
.changeset/header-title-truncate.md (1)
5-5: 💤 Low valueConsider a more concise description (optional).
The current description is acceptable and follows the guideline (one line, present-tense, user perspective). For maximum brevity, you could shorten it to:
"Truncate long slide titles in the editor header"
The current version is clearer though, so this is optional.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.changeset/header-title-truncate.md at line 5, Replace the current changeset header text "Truncate long slide titles in the editor header instead of letting them overlap the right-side controls." with a more concise one-line present-tense description such as "Truncate long slide titles in the editor header" by editing the .changeset header-title-truncate.md file; keep it one sentence, present-tense and user-focused (the shorter string above is preferred but optional).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/app/routes/slide.tsx`:
- Line 346: Remove the inline JSX comment that reads "Editorial toolbar — three
zones, hairline separators, mono-folio center" since it describes WHAT and acts
as a section divider; delete that comment token from the slide.tsx JSX block
(the comment node immediately above the editorial toolbar markup) so the code
conforms to the guideline that comments explain WHY only.
---
Outside diff comments:
In `@packages/core/src/app/routes/slide.tsx`:
- Line 912: The h1 element with className "truncate font-heading text-[13.5px]
font-semibold tracking-[-0.01em]" is a flex child and needs a min-width reset
for proper truncation; update that h1's className to include "min-w-0" (i.e.,
use "min-w-0 truncate ...") so the flex item can shrink and the existing
truncate/text-overflow behavior works correctly.
---
Nitpick comments:
In @.changeset/header-title-truncate.md:
- Line 5: Replace the current changeset header text "Truncate long slide titles
in the editor header instead of letting them overlap the right-side controls."
with a more concise one-line present-tense description such as "Truncate long
slide titles in the editor header" by editing the .changeset
header-title-truncate.md file; keep it one sentence, present-tense and
user-focused (the shorter string above is preferred but optional).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e7ef98d6-3809-4a86-9cbf-4f76fc4759e3
📒 Files selected for processing (2)
.changeset/header-title-truncate.mdpackages/core/src/app/routes/slide.tsx
| @@ -344,8 +344,8 @@ export function Slide() { | |||
| <SelectionReporter /> | |||
| <div className="flex h-dvh flex-col overflow-hidden bg-background text-foreground"> | |||
| {/* Editorial toolbar — three zones, hairline separators, mono-folio center */} | |||
There was a problem hiding this comment.
Remove the comment—it violates the coding guideline.
This comment describes WHAT the code does (three zones, hairline separators) and serves as a section divider. As per coding guidelines, comments should only explain WHY when non-obvious, not WHAT the code does, and should not be section-divider banners.
🧹 Proposed fix
- {/* Editorial toolbar — three zones, hairline separators, mono-folio center */}
<header className="flex h-12 shrink-0 items-center gap-2 border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {/* Editorial toolbar — three zones, hairline separators, mono-folio center */} | |
| <header className="flex h-12 shrink-0 items-center gap-2 border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/core/src/app/routes/slide.tsx` at line 346, Remove the inline JSX
comment that reads "Editorial toolbar — three zones, hairline separators,
mono-folio center" since it describes WHAT and acts as a section divider; delete
that comment token from the slide.tsx JSX block (the comment node immediately
above the editorial toolbar markup) so the code conforms to the guideline that
comments explain WHY only.
|
@ridemountainpig Hey Yen 👋🏻 |
2 participants
Summary
shrink-0, the title sits in aflex-1 min-w-0middle zone sotruncateactually engages.max-w-[min(34rem,calc(100vw-22rem))]formula and thepointer-events-none/autoworkaround that the absolute overlay needed.Before / after
At ~900px viewport with a long title, the title used to render in full on top of the Design / Inspect buttons. It now truncates with an ellipsis and leaves a clean gap to the right-side controls.
CleanShot.2026-05-23.at.11.38.17.yafw.balanced.mp4
Test plan
pnpm core typecheckpnpm checkTrade-off
The title is now centered between the side zones rather than the viewport. When the right zone is wider than the left (typical), the title shifts a few dozen pixels left of the strict viewport center. This is the necessary trade-off for guaranteeing no overlap.
🤖 Generated with Claude Code