fix: prevents table layout shift with fixed column widths #936
Conversation
|
@yashhhguptaaa is attempting to deploy a commit to the Antiwork Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughIntroduces an optional sectionClassName prop to SectionWrapper and updates its usage. Adjusts team settings table layout: sets explicit column widths, adds title tooltips, ensures truncation styling, and tweaks input widths. No behavioral or data-flow changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/(dashboard)/settings/sectionWrapper.tsx (1)
32-32: Avoid always rendering a<p>for arbitrary nodes and when description is empty
- Rendering a
<p>around an arbitraryReactNodecan produce invalid HTML if the node is block-level (e.g., a<div>).- The empty
<p>still participates in thegap-*layout, adding unwanted spacing whendescriptionis undefined.Recommend rendering the description conditionally and wrapping with a
<div>to safely support any node type.Apply this diff:
- <p className="w-full text-sm text-muted-foreground">{description}</p> + {description && ( + <div className="w-full text-sm text-muted-foreground">{description}</div> + )}app/(dashboard)/settings/team/teamMemberRow.tsx (2)
225-231: Ensure truncation works reliably in a flex rowText truncation in flex layouts often needs
min-w-0on the flex item (or its parent) so it can shrink, andtruncateworks best on block/inline-block. Also, avoid a redundant “No email” tooltip when there’s no email.Apply this diff:
- <TableCell className="w-[250px]"> - <div className="flex items-center gap-3"> + <TableCell className="w-[250px]"> + <div className="flex items-center gap-3 min-w-0"> <Avatar fallback={getAvatarFallback(member)} size="sm" /> - <span className="truncate" title={member.email || "No email"}> - {member.email || "No email"} - </span> + <span className="truncate block min-w-0" title={member.email || undefined}> + {member.email || "No email"} + </span> </div> </TableCell>
233-245: Name column width change aligns with header and prevents layout shifts
w-[200px]on the cell matches the header width from the table, which helps keep consistent column sizing.- Admin input
className="w-full"is appropriate now that the column width is constrained.- Non-editing path uses
truncate blockwith atitlefor full value—good for UX.Minor nit: you can mirror the email change and avoid showing a “No display name” tooltip by omitting the title when absent.
Apply this diff:
- <span className="truncate block" title={member.displayName || "No display name"}> - {member.displayName || "No display name"} - </span> + <span className="truncate block" title={member.displayName || undefined}> + {member.displayName || "No display name"} + </span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
app/(dashboard)/settings/sectionWrapper.tsx(1 hunks)app/(dashboard)/settings/team/teamMemberRow.tsx(1 hunks)app/(dashboard)/settings/team/teamSetting.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursorrules)
Name component files in lowerCamelCase, e.g. conversationList.tsx
Files:
app/(dashboard)/settings/team/teamMemberRow.tsxapp/(dashboard)/settings/sectionWrapper.tsxapp/(dashboard)/settings/team/teamSetting.tsx
🧬 Code Graph Analysis (3)
app/(dashboard)/settings/team/teamMemberRow.tsx (4)
components/ui/table.tsx (1)
TableCell(57-57)components/ui/avatar.tsx (1)
Avatar(41-56)lib/data/user.ts (1)
isAdmin(56-56)components/ui/input.tsx (1)
Input(39-39)
app/(dashboard)/settings/sectionWrapper.tsx (1)
packages/marketing/lib/utils.ts (1)
cn(4-6)
app/(dashboard)/settings/team/teamSetting.tsx (1)
components/ui/table.tsx (1)
TableHead(57-57)
🔇 Additional comments (5)
app/(dashboard)/settings/sectionWrapper.tsx (3)
15-16: New propsectionClassName— API extension looks goodAdding
sectionClassName?: stringis a clean way to style the outer section without affecting the content column. No breaking change since it’s optional.
18-26: Prop destructuring updated correctly
sectionClassNameis properly destructured and typed. No issues.
28-28: Composition order will correctly overridelg:flex-rowUsing
cn("... lg:flex-row", sectionClassName)ensuressectionClassNamewins on conflicts (e.g.,lg:flex-col). This aligns with the intended override behavior via twMerge.app/(dashboard)/settings/team/teamSetting.tsx (2)
34-34: PassingsectionClassNameto flip layout on lg screens is correctBecause
SectionWrappercomposes classes withcn(base, sectionClassName), yourlg:flex-col gap-8overrides the baselg:flex-rowas intended.
52-56: Header widths match row cells — reduces column jitter
w-[250px]matches the row’s firstTableCell.- Name
w-[200px]matches the row’s secondTableCell.- Support role
w-[120px]constrains header text to one line.This should significantly reduce layout shifts during edits and long content cases.
Ref :- #930
Problem
Solution
Changes
titletooltipsBefore
Screen.Recording.2025-08-16.at.8.27.26.PM.mov
After
Screen.Recording.2025-08-16.at.8.26.27.PM.mov
Summary by CodeRabbit
New Features
Style
Documentation