web: Fix horizontal scrolling and text truncation in Test tabs#1158
web: Fix horizontal scrolling and text truncation in Test tabs#1158
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughLayout restructuring of email message cells and action controls across process and test rule views. Two rule components reorganized into two-zone flex layouts (content left, actions right) for improved spacing and truncation. EmailMessageCell enhanced with CSS truncation and line-clamping. New EmailRowExample component added to landing page demonstrating truncation behavior. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
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 |
Fix horizontal scrolling in Test tabs by truncating email content and preventing action controls from shrinking in
|
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| <div> | ||
| <div className="underline">Email Row Truncation</div> | ||
| <div className="mt-4"> | ||
| <EmailRowExample /> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
EmailRowExample is used but not defined/imported, which will throw at runtime. Consider importing it or removing this section; the diff removes the usage to avoid the error.
- <div>
- <div className="underline">Email Row Truncation</div>
- <div className="mt-4">
- <EmailRowExample />
- </div>
- </div>
🚀 Want me to fix this? Reply ex: "fix it for me".
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![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 (2)
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsx (1)
152-185: Layout restructuring correctly implements truncation constraints.The two-zone flex layout with
min-w-0 flex-1on the left container is essential for allowing the EmailMessageCell to truncate properly. Theshrink-0on the right ensures action buttons remain fully visible.Optional: Consider removing redundant spacing
The parent container uses
gap-4while the right child hasml-4, creating 32px total spacing. Consider removingml-4from line 164 to rely solely ongap-4for consistent spacing:- <div className="ml-4 shrink-0"> + <div className="shrink-0">This would make spacing consistent and maintain the same visual separation (16px from
gap-4).apps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx (1)
359-404: Layout restructuring successfully enables content truncation.The refactored two-zone layout with
min-w-0 flex-1for the email content andshrink-0for the action buttons correctly implements the truncation fix. The conditional rendering logic for results/actions is preserved.Optional: Consider removing redundant spacing
Similar to TestRules.tsx, the parent uses
gap-4(line 359) while the right container hasml-4(line 371), creating 32px total spacing. Consider simplifying:- <div className="ml-4 flex shrink-0 items-center gap-1"> + <div className="flex shrink-0 items-center gap-1">This maintains consistent 16px spacing via
gap-4and reduces redundancy.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsxapps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/app/(landing)/components/page.tsxapps/web/components/EmailMessageCell.tsx
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/data-fetching.mdc)
**/*.{ts,tsx}: For API GET requests to server, use theswrpackage
Useresult?.serverErrorwithtoastErrorfrom@/components/Toastfor error handling in async operations
**/*.{ts,tsx}: Use wrapper functions for Gmail message operations (get, list, batch, etc.) from @/utils/gmail/message.ts instead of direct API calls
Use wrapper functions for Gmail thread operations from @/utils/gmail/thread.ts instead of direct API calls
Use wrapper functions for Gmail label operations from @/utils/gmail/label.ts instead of direct API calls
**/*.{ts,tsx}: For early access feature flags, create hooks using the naming conventionuse[FeatureName]Enabledthat return a boolean fromuseFeatureFlagEnabled("flag-key")
For A/B test variant flags, create hooks using the naming conventionuse[FeatureName]Variantthat define variant types, useuseFeatureFlagVariantKey()with type casting, and provide a default "control" fallback
Use kebab-case for PostHog feature flag keys (e.g.,inbox-cleaner,pricing-options-2)
Always define types for A/B test variant flags (e.g.,type PricingVariant = "control" | "variant-a" | "variant-b") and provide type safety through type casting
**/*.{ts,tsx}: Don't use primitive type aliases or misleading types
Don't use empty type parameters in type aliases and interfaces
Don't use this and super in static contexts
Don't use any or unknown as type constraints
Don't use the TypeScript directive @ts-ignore
Don't use TypeScript enums
Don't export imported variables
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions
Don't use TypeScript namespaces
Don't use non-null assertions with the!postfix operator
Don't use parameter properties in class constructors
Don't use user-defined types
Useas constinstead of literal types and type annotations
Use eitherT[]orArray<T>consistently
Initialize each enum member value explicitly
Useexport typefor types
Use `impo...
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
apps/web/app/(app)/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)
apps/web/app/(app)/**/*.{ts,tsx}: Components for the page are either put inpage.tsx, or in theapps/web/app/(app)/PAGE_NAMEfolder
If we're in a deeply nested component we will useswrto fetch via API
If you need to useonClickin a component, that component is a client component and file must start withuse client
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/prisma-enum-imports.mdc)
Always import Prisma enums from
@/generated/prisma/enumsinstead of@/generated/prisma/clientto avoid Next.js bundling errors in client componentsImport Prisma using the project's centralized utility:
import prisma from '@/utils/prisma'
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
apps/web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
Import specific lodash functions rather than entire lodash library to minimize bundle size (e.g.,
import groupBy from 'lodash/groupBy')
apps/web/**/*.{ts,tsx}: Use TypeScript with strict null checks
Do not export types/interfaces that are only used within the same file. Export later if needed
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI and Tailwind for components and styling
Usenext/imagepackage for images
For API GET requests to server, use theswrpackage with hooks likeuseSWRto fetch data
For text inputs, use theInputcomponent withregisterPropsfor form integration and error handling
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
**/*.{tsx,ts,css}
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
Implement responsive design with Tailwind CSS using a mobile-first approach
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
**/*.tsx: Use theLoadingContentcomponent to handle loading states instead of manual loading state management
For text areas, use theInputcomponent withtype='text',autosizeTextareaprop set to true, andregisterPropsfor form integration
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
**/*.{js,jsx,ts,tsx}: Don't useaccessKeyattribute on any HTML element
Don't setaria-hidden="true"on focusable elements
Don't add ARIA roles, states, and properties to elements that don't support them
Don't use distracting elements like<marquee>or<blink>
Only use thescopeprop on<th>elements
Don't assign non-interactive ARIA roles to interactive HTML elements
Make sure label elements have text content and are associated with an input
Don't assign interactive ARIA roles to non-interactive HTML elements
Don't assigntabIndexto non-interactive HTML elements
Don't use positive integers fortabIndexproperty
Don't include "image", "picture", or "photo" in img alt prop
Don't use explicit role property that's the same as the implicit/default role
Make static elements with click handlers use a valid role attribute
Always include atitleelement for SVG elements
Give all elements requiring alt text meaningful information for screen readers
Make sure anchors have content that's accessible to screen readers
AssigntabIndexto non-interactive HTML elements witharia-activedescendant
Include all required ARIA attributes for elements with ARIA roles
Make sure ARIA properties are valid for the element's supported roles
Always include atypeattribute for button elements
Make elements with interactive roles and handlers focusable
Give heading elements content that's accessible to screen readers (not hidden witharia-hidden)
Always include alangattribute on the html element
Always include atitleattribute for iframe elements
AccompanyonClickwith at least one of:onKeyUp,onKeyDown, oronKeyPress
AccompanyonMouseOver/onMouseOutwithonFocus/onBlur
Include caption tracks for audio and video elements
Use semantic elements instead of role attributes in JSX
Make sure all anchors are valid and navigable
Ensure all ARIA properties (aria-*) are valid
Use valid, non-abstract ARIA roles for elements with ARIA roles
Use valid AR...
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
**/*.{jsx,tsx}: Don't use unnecessary fragments
Don't pass children as props
Don't use the return value of React.render
Make sure all dependencies are correctly specified in React hooks
Make sure all React hooks are called from the top level of component functions
Don't forget key props in iterators and collection literals
Don't define React components inside other components
Don't use event handlers on non-interactive elements
Don't assign to React component props
Don't use bothchildrenanddangerouslySetInnerHTMLprops on the same element
Don't use dangerous JSX props
Don't use Array index in keys
Don't insert comments as text nodes
Don't assign JSX properties multiple times
Don't add extra closing tags for components without children
Use<>...</>instead of<Fragment>...</Fragment>
Watch out for possible "wrong" semicolons inside JSX elements
Make sure void (self-closing) elements don't have children
Don't usetarget="_blank"withoutrel="noopener"
Don't use<img>elements in Next.js projects
Don't use<head>elements in Next.js projects
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
!(pages/_document).{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
Don't use the next/head module in pages/_document.js on Next.js projects
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/utilities.mdc)
**/*.{js,ts,jsx,tsx}: Use lodash utilities for common operations (arrays, objects, strings)
Import specific lodash functions to minimize bundle size (e.g.,import groupBy from 'lodash/groupBy')
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
apps/web/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
apps/web/**/*.{ts,tsx,js,jsx}: Use@/path aliases for imports from project root
Prefer self-documenting code over comments; use descriptive variable and function names instead of explaining intent with comments
Add helper functions to the bottom of files, not the top
All imports go at the top of files, no mid-file dynamic imports
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
apps/web/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
Follow NextJS app router structure with (app) directory
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
apps/web/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
apps/web/**/*.{tsx,jsx}: Follow tailwindcss patterns with prettier-plugin-tailwindcss for class sorting
Prefer functional components with hooks in React
Use shadcn/ui components when available
Ensure responsive design with mobile-first approach in components
Follow consistent naming conventions using PascalCase for components
Use LoadingContent component for async data with loading and error states
Use React Hook Form with Zod validation for form handling
Useresult?.serverErrorwithtoastErrorandtoastSuccessfor error handling in forms
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
apps/web/**/*.{ts,tsx,js,jsx,json,css}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
Format code with Prettier
Files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
apps/web/components/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/fullstack-workflow.mdc)
Use
LoadingContentcomponent to consistently handle loading and error states, passingloading,error, andchildrenpropsUse PascalCase for component file names (e.g.,
components/Button.tsx)
Files:
apps/web/components/EmailMessageCell.tsx
**/{pages,routes,components}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/gmail-api.mdc)
Never call Gmail API directly from routes or components - always use wrapper functions from the utils folder
Files:
apps/web/components/EmailMessageCell.tsxapps/web/app/(landing)/components/page.tsx
🧠 Learnings (13)
📚 Learning: 2025-11-25T14:40:00.833Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-11-25T14:40:00.833Z
Learning: Applies to **/*.test.{ts,tsx} : Use test helpers `getEmail`, `getEmailAccount`, and `getRule` from `@/__tests__/helpers` for mocking emails, accounts, and rules
Applied to files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
📚 Learning: 2025-11-25T14:37:56.430Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/llm-test.mdc:0-0
Timestamp: 2025-11-25T14:37:56.430Z
Learning: Applies to apps/web/__tests__/**/*.test.ts : Prefer using existing helpers from `@/__tests__/helpers.ts` (`getEmailAccount`, `getEmail`, `getRule`, `getMockMessage`, `getMockExecutedRule`) instead of creating custom test data helpers
Applied to files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
📚 Learning: 2025-11-25T14:37:22.660Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/gmail-api.mdc:0-0
Timestamp: 2025-11-25T14:37:22.660Z
Learning: Applies to apps/web/utils/gmail/**/*.{ts,tsx} : Keep Gmail provider-specific implementation details isolated within the apps/web/utils/gmail/ directory
Applied to files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsx
📚 Learning: 2025-11-25T14:40:00.833Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-11-25T14:40:00.833Z
Learning: Applies to **/*.test.{ts,tsx} : Avoid testing implementation details
Applied to files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsx
📚 Learning: 2025-11-25T14:37:22.660Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/gmail-api.mdc:0-0
Timestamp: 2025-11-25T14:37:22.660Z
Learning: Applies to **/*.{ts,tsx} : Use wrapper functions for Gmail thread operations from @/utils/gmail/thread.ts instead of direct API calls
Applied to files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
📚 Learning: 2025-11-25T14:37:22.660Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/gmail-api.mdc:0-0
Timestamp: 2025-11-25T14:37:22.660Z
Learning: Applies to **/*.{ts,tsx} : Use wrapper functions for Gmail message operations (get, list, batch, etc.) from @/utils/gmail/message.ts instead of direct API calls
Applied to files:
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsxapps/web/components/EmailMessageCell.tsxapps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
📚 Learning: 2025-11-25T14:38:56.992Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-11-25T14:38:56.992Z
Learning: Applies to apps/web/components/ui/**/*.tsx : Shadcn UI components are located in `components/ui` directory
Applied to files:
apps/web/app/(landing)/components/page.tsx
📚 Learning: 2025-12-21T12:21:37.794Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: apps/web/CLAUDE.md:0-0
Timestamp: 2025-12-21T12:21:37.794Z
Learning: Applies to apps/web/**/*.{tsx,jsx} : Use shadcn/ui components when available
Applied to files:
apps/web/app/(landing)/components/page.tsx
📚 Learning: 2025-11-25T14:40:13.649Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:13.649Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Use Shadcn UI and Tailwind for components and styling
Applied to files:
apps/web/app/(landing)/components/page.tsx
📚 Learning: 2025-11-25T14:40:15.063Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:15.063Z
Learning: Applies to **/*.{tsx,ts} : Use Shadcn UI and Tailwind for components and styling
Applied to files:
apps/web/app/(landing)/components/page.tsx
📚 Learning: 2025-11-25T14:36:36.276Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/data-fetching.mdc:0-0
Timestamp: 2025-11-25T14:36:36.276Z
Learning: Applies to **/*.{ts,tsx} : Import error and success toast utilities from '@/components/Toast' for displaying notifications
Applied to files:
apps/web/app/(landing)/components/page.tsx
📚 Learning: 2025-11-25T14:40:13.649Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:13.649Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : For text areas in forms, use the `Input` component with `type='text'`, `autosizeTextarea` prop, `rows`, `name`, `placeholder`, `registerProps` from react-hook-form, and `error` props
Applied to files:
apps/web/app/(landing)/components/page.tsx
📚 Learning: 2025-11-25T14:38:07.606Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/llm.mdc:0-0
Timestamp: 2025-11-25T14:38:07.606Z
Learning: Applies to apps/web/utils/ai/**/*.ts : Use XML-like tags to structure data in prompts, remove excessive whitespace and truncate long inputs, and format data consistently across similar LLM functions
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx
🧬 Code graph analysis (4)
apps/web/app/(app)/[emailAccountId]/cold-email-blocker/TestRules.tsx (1)
apps/web/components/EmailMessageCell.tsx (1)
EmailMessageCell(21-132)
apps/web/components/EmailMessageCell.tsx (1)
apps/web/components/Typography.tsx (1)
MessageText(128-128)
apps/web/app/(landing)/components/page.tsx (1)
apps/web/components/Typography.tsx (1)
MessageText(128-128)
apps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx (1)
apps/web/components/EmailMessageCell.tsx (1)
EmailMessageCell(21-132)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Baz Reviewer
- GitHub Check: cubic · AI code reviewer
- GitHub Check: test
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
apps/web/components/EmailMessageCell.tsx (1)
126-129: LGTM! Truncation and line clamping properly implemented.The
truncateclass on the subject andline-clamp-2 break-allon the snippet effectively constrain long content and prevent horizontal scrolling. Thebreak-allutility is particularly useful for handling long URLs that would otherwise overflow.apps/web/app/(landing)/components/page.tsx (1)
838-872: Excellent demo component showcasing the truncation fix.The EmailRowExample effectively demonstrates how the truncation behavior handles long sender names, subjects, and URLs. Using realistic edge cases (extremely long URL that doesn't naturally break) makes this a valuable visual reference for the fix.
![baz-reviewer[bot]](https://avatars.githubusercontent.com/in/933528?s=60&v=4){kind=small}
1 participant
User description
Truncates long email content and constrains table layout in the Test tabs to prevent horizontal scrolling and keep action buttons visible.
Summary by CodeRabbit
Refactor
Style
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.
Generated description
Below is a concise technical summary of the changes proposed in this PR:
graph LR Components_("Components"):::modified EmailRowExample_("EmailRowExample"):::added TABLE_COMPONENTS_("TABLE_COMPONENTS"):::added EmailMessageCell_("EmailMessageCell"):::modified MESSAGE_TEXT_("MESSAGE_TEXT"):::modified TestRulesContentRow_("TestRulesContentRow"):::modified ProcessRulesRow_("ProcessRulesRow"):::modified Components_ -- "Adds landing section calling EmailRowExample to demo truncation." --> EmailRowExample_ EmailRowExample_ -- "Introduces Table components to render bordered email example." --> TABLE_COMPONENTS_ EmailMessageCell_ -- "Adds truncation and two-line clamp to subject/snippet." --> MESSAGE_TEXT_ TestRulesContentRow_ -- "Adds spaced wrapper and forwards messageId,labelIds to EmailMessageCell." --> EmailMessageCell_ ProcessRulesRow_ -- "Adds spaced layout and forwards messageId/labelIds to cell." --> EmailMessageCell_ classDef added stroke:#15AA7A classDef removed stroke:#CD5270 classDef modified stroke:#EDAC4C linkStyle default stroke:#CBD5E1,font-size:13pxImplement text truncation and line clamping within
EmailMessageCellcomponents to prevent horizontal scrolling and ensure action buttons remain visible. Adjust flex layouts inProcessRulesRowandTestRulesContentRowto constrain content width in Test tabs.ProcessRulesRowandTestRulesContentRowto ensure email message content is constrained, preventing horizontal scrolling and keeping action buttons visible.Modified files (3)
Latest Contributors(2)
EmailMessageCellto truncate long subject lines and clamp email snippets to two lines, improving readability and preventing overflow.Modified files (2)
Latest Contributors(2)