Issue #3526953 by richardgaunt, fionamorrison23, iulianrotaru, joshua1234511: ct-align class overwriting align-center

[joshua-salsadigital]

https://www.drupal.org/project/civictheme/issues/3526953

Checklist before requesting a review

• I have formatted the subject to include ticket number as Issue #123456 by drupal_org_username: Issue title
• I have added a link to the issue tracker
• I have provided information in Changed section about WHY something was done if this was not a normal implementation
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works
• I have run new and existing relevant tests locally with my changes, and they passed
• I have provided screenshots, where applicable

Changed

1. Fixed alignment for center when using Drupal's 'align-center' class on a ct-figure.
2. Fixed margin around left and right aligned ct-figure.

Screenshots

alignment-fixes-v2.mp4

Summary by CodeRabbit

• New Features

  • Added new styles for CKEditor content, ensuring consistent spacing and alignment for figures within the editor.

• Style

  • Updated the main theme stylesheet to include CKEditor-specific styles, improving visual consistency across edited content.

[coderabbitai]

Walkthrough

Adds CKEditor-specific SCSS: two new _ckeditor.scss partials defining .ct-figure alignment styles, and imports that partial into the Civictheme main theme.scss files in both the main theme and the starter kit.

Changes

Cohort / File(s)	Change Summary
Main theme import web/themes/contrib/civictheme/assets/sass/theme.scss	Added @import 'ckeditor/ckeditor'; to include CKEditor styles.
Starter kit import web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.scss	Added @import 'ckeditor/ckeditor'; to include CKEditor styles.
CKEditor SCSS partials web/themes/contrib/civictheme/assets/sass/ckeditor/_ckeditor.scss, web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/ckeditor/_ckeditor.scss	New partials introducing .ct-figure with .align-left, .align-center, and .align-right rules (margins and text-align using ct-spacing).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check consistency between the two _ckeditor.scss copies and ensure spacing/function names (ct-spacing) resolve in both contexts.
• Verify import paths in both theme.scss files compile correctly in the build pipeline.

Suggested reviewers

• richardgaunt

Poem

In a burrow of styles I nibbled away,
Added figures that hop into tidy array.
Left, center, right — spaced just so,
CKEditor gardens now smarter to show.
Hooray for sass and a carrot-shaped glow! 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title references the issue number and describes the core problem (ct-align class overwriting align-center), which directly relates to the main change of adding proper CKEditor figure styling with alignment classes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/3526953-ckeditor-figure

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

web/themes/contrib/civictheme/assets/sass/ckeditor/ckeditor.scss (2)

2-3: Correct the component name casing in header comment

Use the canonical “CKEditor” spelling to stay consistent with upstream naming and the rest of the code base.

-// This file contains styles for the Ck Editor component in the CivicTheme.
+// This file contains styles for the CKEditor component in CivicTheme.

---

6-6: Remove the unused $root variable

$root is declared but never referenced. Leaving unused variables triggers Stylelint scss/no-unused-variable and adds noise.

-  $root: &;
+  // $root placeholder removed – no references found

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 283cc60 and 5636482.

📒 Files selected for processing (2)

• web/themes/contrib/civictheme/assets/sass/ckeditor/ckeditor.scss (1 hunks)
• web/themes/contrib/civictheme/assets/sass/theme.scss (1 hunks)

⏰ 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). (3)

• GitHub Check: Analyze (actions)
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: commit

🔇 Additional comments (2)

web/themes/contrib/civictheme/assets/sass/ckeditor/ckeditor.scss (1)

8-16: Adjust margin rules for centered images in CKEditor

To prevent fixed side margins from overriding Drupal’s default centering, split the combined rule so that only left/right use pixel offsets and center uses auto:

 // Keep spacing for left/right aligned figures.
-&.align-left,
-&.align-center,
-&.align-right {
+&.align-left,
+&.align-right {
   display: block;
   margin-block-start: ct-particle(2);
   margin-block-end: ct-particle(2);
   margin-inline-start: ct-particle-px(5);
   margin-inline-end: ct-particle-px(5);
 }

+// Preserve true horizontal centering for center-aligned figures.
+&.align-center {
+  display: block;
+  margin-block-start: ct-particle(2);
+  margin-block-end: ct-particle(2);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}

• Please test in CKEditor by inserting an image and using the Align center toolbar button—confirm it remains horizontally centered.

web/themes/contrib/civictheme/assets/sass/theme.scss (1)

10-10: Import looks good – ensure partial exists in build path

@import 'ckeditor/ckeditor'; follows existing import style and will compile as long as assets/sass/ckeditor/_ckeditor.scss (leading underscore) is present. No further action required.

[richardgaunt]

LGTM but Alan will have final review.