Conversation
…ter notes Replace single-line truncation (whiteSpace: nowrap) with 2-line CSS clamp in VideoAdapterNote so long notes wrap instead of cropping. Add maxLength=100 to the editor TextField and show "Maximum 100 characters" helper text when the limit is reached, per design direction. Closes NES-1445 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
WalkthroughAdds a 100-character client-side limit and helper text to the VideoBlockEditor notes input, updates VideoAdapterNote to use two-line webkit line-clamp truncation, and adds the corresponding translation and tests. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
|
View your CI Pipeline Execution ↗ for commit 0ce7874
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx (1)
79-88: Move the clamp styles tostyled()forVideoAdapterNote.The Line 85–87 change works functionally, but the new custom styles are inline in
sx. In this path, custom styling should be defined withstyled().Suggested refactor
+import { styled } from '@mui/material/styles' import Typography from '@mui/material/Typography' ... +const ClampedAdapterNote = styled(Typography)({ + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical' +}) + function VideoAdapterNote({ note }: VideoAdapterNoteProps): ReactElement { return ( - <Typography + <ClampedAdapterNote variant="subtitle3" color="text.secondary" - sx={{ - overflow: 'hidden', - textOverflow: 'ellipsis', - display: '-webkit-box', - WebkitLineClamp: 2, - WebkitBoxOrient: 'vertical' - }} > {note} - </Typography> + </ClampedAdapterNote> ) }As per coding guidelines
apps/journeys-admin/**/*.tsx: "Use styled() from@mui/material/stylesfor custom styling instead of Tailwind or other CSS approaches".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx` around lines 79 - 88, The clamp styles currently passed inline via sx on the Typography should be moved into a styled MUI component: create or update the VideoAdapterNote styled component (using styled() from `@mui/material/styles`) to include overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2 and WebkitBoxOrient: 'vertical', then replace the inline sx on the Typography/VideoAdapterNote usage so the Typography still receives variant="subtitle3" and color="text.secondary" but all custom clamp styles live inside VideoAdapterNote.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoBlockEditor/VideoBlockEditor.spec.tsx`:
- Around line 686-796: The three new tests in VideoBlockEditor.spec.tsx must use
the project test harness: wrap the component under test with SnackbarProvider →
MockedProvider → ThemeProvider (in that order) and replace the inline
MockedProvider mocks and any direct network mocking with the shared MSW setup
(test/mswServer.ts) and the ApolloLoadingProvider helper; update the render
calls that mount VideoBlockEditor (selectedBlock variable and onChange usage) to
use render(<ApolloLoadingProvider><VideoBlockEditor ...
/></ApolloLoadingProvider>) inside the required wrapper order, remove the mocks
prop from MockedProvider, and ensure network GraphQL fixtures are provided via
MSW handlers instead of MockedProvider so tests conform to apps/journeys-admin
specs.
---
Nitpick comments:
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx`:
- Around line 79-88: The clamp styles currently passed inline via sx on the
Typography should be moved into a styled MUI component: create or update the
VideoAdapterNote styled component (using styled() from `@mui/material/styles`) to
include overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box',
WebkitLineClamp: 2 and WebkitBoxOrient: 'vertical', then replace the inline sx
on the Typography/VideoAdapterNote usage so the Typography still receives
variant="subtitle3" and color="text.secondary" but all custom clamp styles live
inside VideoAdapterNote.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 209b9936-0f8e-480e-9ea1-bf083fd30d32
📒 Files selected for processing (3)
apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoBlockEditor/VideoBlockEditor.spec.tsxapps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoBlockEditor/VideoBlockEditor.tsxapps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
Author
Review feedback addressed (d7bd2bf)Challenged:
No code changes needed — all feedback was challenged. |
…late-adapter-notes-get-cropped-in
Ur-imazing
approved these changes
Apr 9, 2026
…late-adapter-notes-get-cropped-in
jianwei1
deleted the
jianweichong/nes-1445-media-screen-long-template-adapter-notes-get-cropped-in
branch
tanflem
pushed a commit
that referenced
this pull request
Apr 13, 2026
…ter notes (#9000) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes NES-1445: Long template adapter notes were being cropped to a single line in the Media screen customisation flow.
whiteSpace: 'nowrap'with CSS line-clamp (2 lines) inVideoAdapterNoteso long notes wrap instead of being truncatedmaxLength=100to the Template Adapter Notes TextField in the editor, with conditional "Maximum 100 characters" helper text shown only when the limit is reachedTest plan
Post-Deploy Monitoring & Validation
No additional operational monitoring required — purely presentational CSS change and client-side input constraint with no backend impact.
🤖 Generated with Claude Code
Summary by CodeRabbit
Improvements
Tests