Skip to content

Only show scroll bars for students instructions when needed - #1613

Merged
DNR500 merged 1 commit into
mainfrom
remove-scrolling-on-instructions-when-unneeded
Aug 27, 2026
Merged

Only show scroll bars for students instructions when needed#1613
DNR500 merged 1 commit into
mainfrom
remove-scrolling-on-instructions-when-unneeded

Conversation

@DNR500

@DNR500 DNR500 commented Aug 26, 2026

Copy link
Copy Markdown
Contributor

Summary

issue: 1707

Short project instructions no longer show a scrollbar. The bar still appears when the text is too long to fit.

Screenshot of instructions without scroll bar

Comment on lines +9 to +12
// Student preview sizes to its content so short steps are not scrollable.
&:has(.c-instruction-tabs) {
block-size: 100%;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks good.

I assume in the react component we already know when this tab is rendered - we could use a modifer class instead for slightly better browser support. Although :has() is baseline now 🤷

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

:has() has been in place for a while now so I think it safe to use

@DNR500
DNR500 merged commit 5e34bf9 into main Aug 27, 2026
11 checks passed
@DNR500
DNR500 deleted the remove-scrolling-on-instructions-when-unneeded branch August 27, 2026 12:51
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