Fix vertical alignment in topmost `collapseUnchanged` and `collapseRanges` bars #2911

VasylMarchuk · 2025-06-22T06:40:15Z

Brief

This fixes vertical text alignment in topmost collapseUnchanged and collapseRanges bars.

Details

Since our file headers have box-shadow and topmost bars lack the top border — an extra 1px padding-top needs to be added for proper alignment.

After

Before

Checklist

I've thoroughly self-reviewed my changes
I've added tests for my changes, unless they affect admin-only areas (or are otherwise not worth testing)
I've verified any visual changes using Percy (add a commit with [percy] in the message to trigger)

coderabbitai · 2025-06-22T06:40:21Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions · 2025-06-22T06:43:46Z

Test Results

1 files ±0 1 suites ±0 8m 30s ⏱️ -30s
633 tests ±0 584 ✅ - 1 48 💤 ±0 0 ❌ ±0 1 🔥 +1
633 runs ±0 583 ✅ - 2 48 💤 ±0 1 ❌ +1 1 🔥 +1

For more details on these errors, see this check.

Results for commit 373e664. ± Comparison against base commit 5b69f23.

♻️ This comment has been updated with latest results.

codecov · 2025-06-22T06:43:48Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
585	1	584	48

View the top 1 failed test(s) by shortest run time

Chrome 137.0::Acceptance | concept-groups-test: displays no progress bar if progress percentage is 0

Stack Traces | 0.376s run time

global failure: ChunkLoadError: Loading chunk vendors-components_blocks_concept-animation-block_ts-components_blocks_concept-question-block-dcba05 failed.
(error: http://localhost:7357/assets/chunk.2906906391d018539458.js)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

codecov · 2025-06-23T18:56:29Z

Bundle Report

Changes will decrease total bundle size by 1.67kB (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
client-array-push	38.1MB	-1.67kB (-0.0%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/chunk.*.js`	-1.59kB	2.99MB	-0.05%
`assets/chunk.*.js`	-81 bytes	26.68kB	-0.3%

rohitpaulk · 2025-06-24T02:20:09Z

app/utils/code-mirror-themes.ts

@@ -240,6 +241,7 @@ const BASE_STYLE = {

      '& .cm-collapsedRangesInner': {
        borderTop: 'none',
+        paddingTop: '6px',


Where does this magic number come from 🤔 Any way to make this a bit more obvious?

Usually we don't document things like 1px, 0.5 rem etc. since they directly map to Tailwind units. Anything outside common values is worth looking at - either we change to use the standard ones, or we document well

Ah, sure, magic number comes from CodeMirror itself where default padding is 5px, and I am making it 6.

I was thinking myself about how to improve this, maybe use CSS variables and calc. The problem is that CodeMirror does not use Tailwind, the values are hardcoded either in default styles or in default theme (which we override), and CodeMirror is kind of it's own separate thing, a subproject inside our project. Can't wait for a chance to extract it into a separate Ember addon and repository, so it doesn't pollute ours with stuff like this.

Will see what I can do with this one.

@rohitpaulk

rohitpaulk

Added note re: magic number

…nges` bars

VasylMarchuk requested a review from rohitpaulk June 22, 2025 06:40

VasylMarchuk self-assigned this Jun 22, 2025

VasylMarchuk added the bug Something isn't working label Jun 22, 2025

VasylMarchuk force-pushed the code-mirror/fix-top-padding branch from 2e30b33 to 9f832f7 Compare June 23, 2025 18:52

vercel bot deployed to Preview – frontend June 23, 2025 18:54 View deployment

vercel bot deployed to Preview – frontend-stg June 23, 2025 18:55 View deployment

rohitpaulk reviewed Jun 24, 2025

View reviewed changes

rohitpaulk requested changes Jun 24, 2025

View reviewed changes

VasylMarchuk force-pushed the code-mirror/fix-top-padding branch from 9f832f7 to a93a137 Compare July 3, 2025 08:48

vercel bot deployed to Preview – frontend July 3, 2025 08:50 View deployment

vercel bot deployed to Preview – frontend-stg July 3, 2025 08:52 View deployment

Fix vertical alignment in topmost collapseUnchanged and `collapseRa…

373e664

…nges` bars

VasylMarchuk force-pushed the code-mirror/fix-top-padding branch from a93a137 to 373e664 Compare July 4, 2025 13:11

vercel bot deployed to Preview – frontend July 4, 2025 13:14 View deployment

vercel bot deployed to Preview – frontend-stg July 4, 2025 13:15 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix vertical alignment in topmost `collapseUnchanged` and `collapseRanges` bars #2911

Fix vertical alignment in topmost `collapseUnchanged` and `collapseRanges` bars #2911

VasylMarchuk commented Jun 22, 2025

Uh oh!

coderabbitai bot commented Jun 22, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

github-actions bot commented Jun 22, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jun 22, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jun 23, 2025 •

edited

Loading

Assets Changed:

Uh oh!

rohitpaulk Jun 24, 2025

Uh oh!

rohitpaulk Jun 24, 2025

Uh oh!

VasylMarchuk Jun 24, 2025 •

edited

Loading

Uh oh!

rohitpaulk left a comment

Uh oh!

Uh oh!

Fix vertical alignment in topmost collapseUnchanged and collapseRanges bars #2911

Are you sure you want to change the base?

Fix vertical alignment in topmost collapseUnchanged and collapseRanges bars #2911

Conversation

VasylMarchuk commented Jun 22, 2025

Brief

Details

After

Before

Checklist

Uh oh!

coderabbitai bot commented Jun 22, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

github-actions bot commented Jun 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results

Uh oh!

codecov bot commented Jun 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

codecov bot commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

rohitpaulk Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

rohitpaulk Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

VasylMarchuk Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rohitpaulk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Fix vertical alignment in topmost `collapseUnchanged` and `collapseRanges` bars #2911

Fix vertical alignment in topmost `collapseUnchanged` and `collapseRanges` bars #2911

CodeRabbit Configuration File (`.coderabbit.yaml`)

github-actions bot commented Jun 22, 2025 •

edited

Loading

codecov bot commented Jun 22, 2025 •

edited

Loading

codecov bot commented Jun 23, 2025 •

edited

Loading

VasylMarchuk Jun 24, 2025 •

edited

Loading