Skip to content

fix: social media step spacing, preview size, and UI cleanup (NES-1530)#8962

Merged
csiyang merged 6 commits intomainfrom
siyangcao/nes-1530-social-media-step-fixes
Apr 13, 2026
Merged

fix: social media step spacing, preview size, and UI cleanup (NES-1530)#8962
csiyang merged 6 commits intomainfrom
siyangcao/nes-1530-social-media-step-fixes

Conversation

@csiyang
Copy link
Copy Markdown
Contributor

@csiyang csiyang commented Apr 7, 2026

Summary

  • Reduced spacing between elements from 48px to 20px and removed vertical padding
  • Removed Facebook-like UI elements (likes/comments/share icons, avatar header) from social preview card
  • Replaced card shadow with outlined border using divider color
  • Reduced social preview card media size to 215x147px per Figma spec
  • Hidden assisting/helper text on Headline and Secondary Text fields

Fixes NES-1530

Test plan

  • SocialScreen tests pass (7/7)
  • SocialScreenSocialImage tests pass (7/7)

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style

    • Refined spacing and padding on social customization screens for a cleaner, more compact layout.
    • Updated social preview card visuals with consistent corner radii, adjusted media sizing, and clarified borders.
    • Standardized button spacing for more consistent vertical rhythm.
  • Refactor

    • Components can now optionally suppress helper text and decorative adornments for slimmer editor and preview displays.

- Reduce Stack gap from 48px to 20px and remove vertical padding
- Remove CardHeader (avatar, skeleton title) and CardActions (like/comment/share icons)
- Replace card shadow with outlined variant using divider border color
- Resize social preview card media to 215x147px
- Hide helper/assisting text on TitleEdit and DescriptionEdit fields

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@linear
Copy link
Copy Markdown

linear Bot commented Apr 7, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 7, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: cf36d5b3-27d2-463c-b5fd-810045522764

📥 Commits

Reviewing files that changed from the base of the PR and between fe78418 and a72bc5b.

📒 Files selected for processing (2)
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/CustomizeFlowNextButton/CustomizeFlowNextButton.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
✅ Files skipped from review due to trivial changes (1)
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/CustomizeFlowNextButton/CustomizeFlowNextButton.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx

Walkthrough

Added optional hideHelperText props to TitleEdit and DescriptionEdit, renamed hasCreatorDescriptionhideAdornments in SocialScreenSocialImage, adjusted card styling and media dimensions, reduced Stack spacing and removed vertical padding in SocialScreen, passed new props to child components, and simplified CustomizeFlowNextButton top margin.

Changes

Cohort / File(s) Summary
TitleEdit / DescriptionEdit
apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/TitleEdit/TitleEdit.tsx, apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/DescriptionEdit/DescriptionEdit.tsx
Added exported TitleEditProps and DescriptionEditProps with optional hideHelperText?: boolean; updated component signatures to accept { hideHelperText = false }; TextField.helperText is set to undefined when hideHelperText is true (both editable and disabled/read-only paths).
SocialScreen layout
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
Reduced Stack gap from 65, removed py: 5 vertical padding, and passed hideHelperText and hideAdornments props to child components (TitleEdit, DescriptionEdit, SocialScreenSocialImage).
SocialScreenSocialImage
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreenSocialImage/SocialScreenSocialImage.tsx
Renamed prop hasCreatorDescription?: booleanhideAdornments?: boolean (default false); updated media width/height constants; removed conditional bottom border-radius and set borderRadius: 2; omit CardHeader and CardActions when hideAdornments is true; set Card to variant="outlined", elevation={0}, borderColor: 'divider'; adjusted CardContent padding/spacing.
CustomizeFlowNextButton styling
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/CustomizeFlowNextButton/CustomizeFlowNextButton.tsx
Replaced responsive mt: { xs: 6, sm: 4 } with fixed mt: 5 across breakpoints; no other behavioral changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main changes: spacing adjustments, preview size updates, and UI cleanup in the social media step components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch siyangcao/nes-1530-social-media-step-fixes

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Apr 7, 2026

View your CI Pipeline Execution ↗ for commit a72bc5b

Command Status Duration Result
nx run journeys-admin-e2e:e2e ✅ Succeeded 28s View ↗
nx run-many --target=vercel-alias --projects=jo... ✅ Succeeded 2s View ↗
nx run-many --target=upload-sourcemaps --projec... ✅ Succeeded 9s View ↗
nx run-many --target=deploy --projects=journeys... ✅ Succeeded 2m 29s View ↗

☁️ Nx Cloud last updated this comment at 2026-04-13 00:11:02 UTC

@github-actions github-actions Bot requested a deployment to Preview - journeys-admin April 7, 2026 02:35 Pending
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin April 7, 2026 02:39 Inactive
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 7, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
journeys-admin ✅ Ready journeys-admin preview Mon Apr 13 12:07:46 NZST 2026

@csiyang csiyang self-assigned this Apr 9, 2026
@github-actions github-actions Bot requested a deployment to Preview - journeys-admin April 9, 2026 03:14 Pending
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreenSocialImage/SocialScreenSocialImage.tsx (1)

31-33: Rename props interface to match repository convention.

Please rename the interface to SocialScreenSocialImageProps for consistency with the TypeScript props naming rule.

♻️ Proposed refactor
-interface SocialScreenSocialImage {
+interface SocialScreenSocialImageProps {
   hideAdornments?: boolean
 }
 
 export function SocialScreenSocialImage({
   hideAdornments = false
-}: SocialScreenSocialImage): ReactElement {
+}: SocialScreenSocialImageProps): ReactElement {

As per coding guidelines, "Props interfaces must follow naming convention {ComponentName}Props".

Also applies to: 53-55

🤖 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/SocialScreen/SocialScreenSocialImage/SocialScreenSocialImage.tsx`
around lines 31 - 33, The props interface currently named
SocialScreenSocialImage should be renamed to SocialScreenSocialImageProps to
follow the {ComponentName}Props convention; update the interface declaration
(SocialScreenSocialImage → SocialScreenSocialImageProps) and replace all
usages/references of SocialScreenSocialImage in this file (including the
component signature and any FC or prop-type annotations around
SocialScreenSocialImage) with SocialScreenSocialImageProps so the component and
its props type remain consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreenSocialImage/SocialScreenSocialImage.tsx`:
- Around line 31-33: The props interface currently named SocialScreenSocialImage
should be renamed to SocialScreenSocialImageProps to follow the
{ComponentName}Props convention; update the interface declaration
(SocialScreenSocialImage → SocialScreenSocialImageProps) and replace all
usages/references of SocialScreenSocialImage in this file (including the
component signature and any FC or prop-type annotations around
SocialScreenSocialImage) with SocialScreenSocialImageProps so the component and
its props type remain consistent.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b3df4e05-ad35-47aa-8d07-060e9ea7449f

📥 Commits

Reviewing files that changed from the base of the PR and between 74dc141 and a58ae61.

📒 Files selected for processing (4)
  • apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/DescriptionEdit/DescriptionEdit.tsx
  • apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/TitleEdit/TitleEdit.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreenSocialImage/SocialScreenSocialImage.tsx

@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin April 9, 2026 03:18 Inactive
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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/SocialDetails/TitleEdit/TitleEdit.tsx`:
- Around line 88-92: The helper text currently short-circuits on hideHelperText
and therefore suppresses validation errors; update the helper text logic in
TitleEdit (where hideHelperText and errors.seoTitle are used) so validation
messages always display: return errors.seoTitle when present, otherwise show the
default guidance only when hideHelperText is false (i.e., helperText =
errors.seoTitle ?? (hideHelperText ? undefined : t('Recommended length: 5
words'))), preserving the existing type cast for errors.seoTitle.
🪄 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: dc0ef5b9-cb64-4366-8926-ca75ad1383d2

📥 Commits

Reviewing files that changed from the base of the PR and between a58ae61 and fe78418.

📒 Files selected for processing (2)
  • apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/DescriptionEdit/DescriptionEdit.tsx
  • apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/TitleEdit/TitleEdit.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/DescriptionEdit/DescriptionEdit.tsx

mikeallisonJS
mikeallisonJS previously approved these changes Apr 9, 2026
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin April 13, 2026 00:04 Inactive
@csiyang csiyang added this pull request to the merge queue Apr 13, 2026
Merged via the queue into main with commit 99d3fcd Apr 13, 2026
21 checks passed
@csiyang csiyang deleted the siyangcao/nes-1530-social-media-step-fixes branch April 13, 2026 03:03
tanflem pushed a commit that referenced this pull request Apr 13, 2026
…0) (#8962)

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants