Skip to content

[Radio] Added a reusable narrowViewportDecorator that constrains forcing content overflow so scroll buttons appear#3254

Merged
ivyolamit merged 4 commits intomainfrom
LEMS-3889/adjust-scrollable-viewport
Feb 17, 2026
Merged

[Radio] Added a reusable narrowViewportDecorator that constrains forcing content overflow so scroll buttons appear#3254
ivyolamit merged 4 commits intomainfrom
LEMS-3889/adjust-scrollable-viewport

Conversation

@ivyolamit
Copy link
Contributor

Summary:

Added a reusable narrowViewportDecorator that constrains the story width to 400px, forcing content overflow so scroll buttons appear and applied the decorator to all "with scroll" radio widget stories.

Issue: LEMS-3889

Test plan:

…ble narrowViewportDecorator that constrains the story width to 400px, forcing content overflow so scroll buttons appear and applied the decorator to all "with scroll" radio widget stories.
…wViewportDecorator that constrains forcing content overflow so scroll buttons appear
@ivyolamit ivyolamit self-assigned this Feb 13, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2026

🗄️ Schema Change: No Changes ✅

@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2026

🛠️ Item Splitting: No Changes ✅

@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2026

Size Change: 0 B

Total Size: 484 kB

ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 20.8 kB
packages/keypad-context/dist/es/index.js 1 kB
packages/kmath/dist/es/index.js 5.98 kB
packages/math-input/dist/es/index.js 98.5 kB
packages/math-input/dist/es/strings.js 1.61 kB
packages/perseus-core/dist/es/index.item-splitting.js 11.8 kB
packages/perseus-core/dist/es/index.js 24.8 kB
packages/perseus-editor/dist/es/index.js 99.2 kB
packages/perseus-linter/dist/es/index.js 8.83 kB
packages/perseus-score/dist/es/index.js 9.26 kB
packages/perseus-utils/dist/es/index.js 403 B
packages/perseus/dist/es/index.js 186 kB
packages/perseus/dist/es/strings.js 7.44 kB
packages/pure-markdown/dist/es/index.js 1.39 kB
packages/simple-markdown/dist/es/index.js 6.71 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2026

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (cf27f08) and published it to npm. You
can install it using the tag PR3254.

Example:

pnpm add @khanacademy/perseus@PR3254

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3254

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3254

@ivyolamit
Copy link
Contributor Author

Before After
image image

@ivyolamit ivyolamit marked this pull request as ready for review February 13, 2026 21:34
Copy link
Contributor

@anakaren-rojas anakaren-rojas left a comment

Choose a reason for hiding this comment

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

Two nits, but otherwise LGTM

Co-authored-by: Anakaren <anakaren@khanacademy.org>
);

// Force overflow so the radio widget’s scroll controls render in these stories.
export const narrowViewportDecorator: Decorator = (Story) => (
Copy link
Contributor

Choose a reason for hiding this comment

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

not blocking: Claude pointed out the other decorators aren't typed as Decorator, so that's something you could add for consistency.

Copy link
Contributor

@mark-fitzgerald mark-fitzgerald left a comment

Choose a reason for hiding this comment

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

Looks great!

Copy link
Contributor

@Myranae Myranae left a comment

Choose a reason for hiding this comment

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

Looks good!

@ivyolamit ivyolamit merged commit 9eb52fe into main Feb 17, 2026
11 checks passed
@ivyolamit ivyolamit deleted the LEMS-3889/adjust-scrollable-viewport branch February 17, 2026 19:01
mark-fitzgerald pushed a commit that referenced this pull request Feb 17, 2026
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.


# Releases
## @khanacademy/math-input@26.4.0

### Minor Changes

-   [#3113](#3113) [`082388a936`](082388a) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Break Perseus styling into its own Cascade Layers

### Patch Changes

-   [#3259](#3259) [`8ee65a2add`](8ee65a2) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Sync dependencies with Frontend

## @khanacademy/perseus@75.1.0

### Minor Changes

-   [#3247](#3247) [`0e578d70fa`](0e578d7) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Remove static props from radio widget


-   [#3227](#3227) [`e1f9a0d2a1`](e1f9a0d) Thanks [@Myranae](https://github.com/Myranae)! - Remove onChange from Radio


-   [#3113](#3113) [`082388a936`](082388a) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Break Perseus styling into its own Cascade Layers

### Patch Changes

-   [#3225](#3225) [`6d7338e5c6`](6d7338e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Fix zoomed image view in preview


-   [#3259](#3259) [`8ee65a2add`](8ee65a2) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Sync dependencies with Frontend


-   [#3254](#3254) [`9eb52fe892`](9eb52fe) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Added a reusable narrowViewportDecorator that constrains the story width to 400px, forcing content overflow so scroll buttons appear and applied the decorator to all "with scroll" radio widget stories.

-   Updated dependencies \[[`8ee65a2add`](8ee65a2), [`1cd9b4d66a`](1cd9b4d), [`082388a936`](082388a)]:
    -   @khanacademy/math-input@26.4.0
    -   @khanacademy/perseus-linter@4.8.0

## @khanacademy/perseus-editor@28.11.0

### Minor Changes

-   [#3247](#3247) [`0e578d70fa`](0e578d7) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Remove static props from radio widget

### Patch Changes

-   [#3225](#3225) [`6d7338e5c6`](6d7338e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Fix zoomed image view in preview


-   [#3259](#3259) [`8ee65a2add`](8ee65a2) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Sync dependencies with Frontend

-   Updated dependencies \[[`0e578d70fa`](0e578d7), [`e1f9a0d2a1`](e1f9a0d), [`6d7338e5c6`](6d7338e), [`8ee65a2add`](8ee65a2), [`1cd9b4d66a`](1cd9b4d), [`9eb52fe892`](9eb52fe), [`082388a936`](082388a)]:
    -   @khanacademy/perseus@75.1.0
    -   @khanacademy/math-input@26.4.0
    -   @khanacademy/perseus-linter@4.8.0

## @khanacademy/perseus-linter@4.8.0

### Minor Changes

-   [#3248](#3248) [`1cd9b4d66a`](1cd9b4d) Thanks [@nishasy](https://github.com/nishasy)! - Export LinterWarning type

Author: khan-actions-bot

Reviewers: mark-fitzgerald

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ⏭️  2 checks have been skipped, ✅ 6 checks were successful

Pull Request URL: #3251
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants