[CC Projects] Lines are sometimes off by one line #1264
Merged
Conversation
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
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
patch0
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes line number alignment issues in code blocks throughout the editor by standardizing font usage and applying consistent typography styles. The changes address problems where emojis and other content would cause line highlighting to misalign, and removes an unwanted border from code output blocks.
Key changes:
- Centralized font family definitions in a new
_fonts.scssfile with CSS custom properties for consistent font application - Applied design system typography mixins to ensure consistent line spacing across code blocks and instruction panels
- Removed border styling from code output blocks in the instructions panel
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/assets/stylesheets/settings/_fonts.scss | New file defining standardized sans-serif and monospace font stacks |
| src/assets/stylesheets/index.scss | Migrated to use centralized font variables via CSS custom properties |
| src/assets/stylesheets/InternalStyles.scss | Added font variable definitions with fallbacks for web component customization |
| src/assets/stylesheets/Instructions.scss | Applied typography mixins for consistent line spacing and removed border from code output |
| src/assets/stylesheets/EditorPanel.scss | Applied typography mixin to code editor scroller for consistent line height |
| src/assets/stylesheets/Button.scss | Updated to use centralized sans-serif font variable |
| src/assets/stylesheets/AstroPiModel.scss | Updated to use centralized monospace font variable |
| src/assets/stylesheets/App.scss | Updated to use centralized sans-serif font variable |
| CHANGELOG.md | Documented new features and fixed issues |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
cocomarine
temporarily deployed
to
previews/1264/merge
GitHub Actions
Inactive
loiswells97
reviewed
Oct 27, 2025
loiswells97
reviewed
Oct 27, 2025
loiswells97
reviewed
Oct 27, 2025
| @@ -0,0 +1,2 @@ | |||
| $font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; | |||
| $font-family-monospace: RobotoMono, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; | |||
Contributor
There was a problem hiding this comment.
My only concern with this is that it might change the fonts we're using in places like within codemirror, as we were using different monospace fonts in different places - maybe that's okay though?
Contributor
There was a problem hiding this comment.
This does indeed change the fonts within codemirror and other places to a standard set. I'm not sure we necessarily need all these fonts to fall back through. It does mean we have a consistent treatment of fonts through the interface now. They can also be customised by the new CSS variables so that in individual applications (e.g. code club projects) a different font could be used.
Contributor
There was a problem hiding this comment.
I'll try and sort out some screenshots of the codemirror change in the projects site UI
loiswells97
reviewed
Oct 27, 2025
Contributor
loiswells97
left a comment
loiswells97
left a comment
There was a problem hiding this comment.
Just a few thoughts/questions
Contributor
|
Awaiting @rammodhvadia or @patch0 to review the changes suggested by Lois. |
patch0
deleted the
bugfix/1259-_CC_Projects_Lines_are_sometimes_off_by_one_line
branch
Merged
patch0
added a commit
that referenced
this pull request
Nov 17, 2025
### Added - Font-family variables that can be used to customise the sans-serif and monospace fonts used in the editor (#1264) - Material symbols font to web component preview page since the Design System depends on this (#1261) - Ability for plugins to add buttons to the SidebarPanel header (#1270, #1271, #1274) - Prevent access to the session from within the editor (#1275) ### Changed - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257) - Updated Design System react to v2.6.2 (#1261) - Changed SidebarPanel to accept an array of buttons (#1270) - Changed SidebarPanel to use an array of buttons as elements (#1271) - Changed default-width and min-width on SidebarPanel (#1273) ### Fixed - Styling design system components used in the web component (#1263) - Sidebar panel overflow for plugins (#1266, #1269) - Extra border around code output in the instructions panel (#1253) - Line numbering alignment in code blocks in the instructions panel (#1259) - Extra lines added at the start of some code blocks (#1267)
patch0
added a commit
that referenced
this pull request
Nov 18, 2025
In #1264 we added a `typography.style-1()` to the `.cm-scroller` class in the EditorPanel css, which unwittingly prevented font sizes from taking effect. This PR reverts that, but also tidies up the styling to use Design System typography styles instead, so line spacing etc goes with it. Also removes the `$space-0-5` var in favour of the Design System vars. e.g. Small: <img width="841" height="649" alt="image" src="https://github.com/user-attachments/assets/394b807d-a051-427c-b950-afbce7906a7c" /> Medium: <img width="857" height="596" alt="image" src="https://github.com/user-attachments/assets/ea3453ea-7f86-4bd1-a36e-6e7243706928" /> Large: <img width="861" height="496" alt="image" src="https://github.com/user-attachments/assets/3025bc83-eb31-429e-bff2-9c9eeebe1ea4" />
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Status
closes #1259, #1253
What's changed
This also unifies the list of fonts used in the Editor to the list in settings/fonts. They can be added-to/changed by setting
--editor-font-family-sans-serifand--editor-font-family-monospace.Screenshots