Topic style fixes by coryrylan · Pull Request #199 · NVIDIA/elements

coryrylan · 2026-07-30T18:06:52Z

Summary by CodeRabbit

Bug Fixes
- Improved drawer positioning so drawers reliably align with the right or bottom viewport edges.
- Fixed select dropdown sizing to prevent overflow, unnecessary scrolling, and blank space.
- Improved select scrolling behavior and scrollbar presentation.
UI Improvements
- Refined select option sizing and spacing for more consistent layouts across different list sizes.

- Updated CSS for drawer component to ensure inset styles are applied - Enhanced tests to verify positioning at viewport edges for 'right' and 'bottom' positions. Signed-off-by: Cory Rylan <crylan@nvidia.com>

- Adjusted the CSS variables for size and gap to enhance layout consistency. - Updated the size property logic in the Select component to correctly reflect the intended size. - Enhanced tests to verify proper rendering of options without overflow and ensure no blank space after visible rows. Signed-off-by: Cory Rylan <crylan@nvidia.com>

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

coderabbitai · 2026-07-30T18:07:44Z

📝 Walkthrough

Walkthrough

The changes strengthen drawer edge positioning and revise select sizing calculations. Select tests now verify direct size values, visible row boundaries, and the absence of unnecessary scrolling or blank space.

Changes

Drawer positioning

Layer / File(s)	Summary
Drawer edge positioning overrides `projects/core/src/drawer/drawer.css`, `projects/core/src/drawer/drawer.test.ts`	Position-specific inset declarations now use `!important`, and parameterized tests verify right and bottom alignment with viewport edges.

Select sizing

Layer / File(s)	Summary
Select size calculation and layout `projects/core/src/select/select.ts`, `projects/core/src/select/select.css`	Select size values now map directly to `--size`, with derived height and gap variables applied to input, slotted select, tags, and menu styling.
Select row-boundary validation `projects/core/src/select/select.test.ts`	Tests verify direct size values, large-menu rendering without scrolling, and no blank space after visible rows.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: copilot

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is vague and does not clearly describe the specific drawer and select styling changes in the PR.	Rename it to mention the main change, such as drawer and select styling fixes or select size and drawer position updates.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch topic-style-fixes

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

projects/core/src/drawer/drawer.css

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

projects/core/src/drawer/drawer.test.ts

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

projects/core/src/select/select.css

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

2 others

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

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@projects/core/src/select/select.css`:
- Line 44: Update the scrollbar-color declaration in the select stylesheet to
use lowercase currentcolor in the color-mix expression, preserving the existing
value and behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 07c1fa1e-c009-4af6-b456-fafe27cb370c

📥 Commits

Reviewing files that changed from the base of the PR and between 1521595 and e928e36.

⛔ Files ignored due to path filters (4)

projects/core/.visual/pagination.dark.png is excluded by !**/*.png
projects/core/.visual/pagination.png is excluded by !**/*.png
projects/core/.visual/select.dark.png is excluded by !**/*.png
projects/core/.visual/select.png is excluded by !**/*.png

📒 Files selected for processing (5)

projects/core/src/drawer/drawer.css
projects/core/src/drawer/drawer.test.ts
projects/core/src/select/select.css
projects/core/src/select/select.test.ts
projects/core/src/select/select.ts

coderabbitai · 2026-07-30T18:11:32Z

 [input] {
-  height: var(--height);
+  scroll-behavior: smooth;
+  scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Use lowercase currentcolor to satisfy Stylelint.

value-keyword-case reports this declaration. CSS behavior is unchanged, but the current spelling can fail the style check.

Proposed fix

- scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%) + scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentcolor 20%)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)

scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentcolor 20%)

🧰 Tools

🪛 Stylelint (17.14.1)

[error] 44-44: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@projects/core/src/select/select.css` at line 44, Update the scrollbar-color declaration in the select stylesheet to use lowercase currentcolor in the color-mix expression, preserving the existing value and behavior.

Source: Linters/SAST tools

coryrylan · 2026-07-30T18:59:13Z

🎉 This issue has been resolved in version 2.2.2 🎉

Changelog

coryrylan · 2026-07-30T21:45:48Z

🎉 This issue has been resolved in version 2.1.2 🎉

Changelog

coryrylan · 2026-07-30T21:46:28Z

🎉 This issue has been resolved in version 2.3.0 🎉

Changelog

coryrylan · 2026-07-30T21:47:15Z

🎉 This issue has been resolved in version 2.1.9 🎉

Changelog

coryrylan added 2 commits July 30, 2026 11:51

fix(core): drawer positioning

596517a

- Updated CSS for drawer component to ensure inset styles are applied - Enhanced tests to verify positioning at viewport edges for 'right' and 'bottom' positions. Signed-off-by: Cory Rylan <crylan@nvidia.com>

coryrylan requested a review from johnyanarella July 30, 2026 18:06

coryrylan self-assigned this Jul 30, 2026

Copilot AI review requested due to automatic review settings July 30, 2026 18:06

Copilot AI reviewed Jul 30, 2026

github-actions Bot added the scope(core) label Jul 30, 2026

coderabbitai Bot reviewed Jul 30, 2026

View reviewed changes

johnyanarella approved these changes Jul 30, 2026

View reviewed changes

coryrylan merged commit 6af535d into main Jul 30, 2026
15 checks passed

coryrylan deleted the topic-style-fixes branch July 30, 2026 18:50

coryrylan added the released label Jul 30, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Topic style fixes - #199

Topic style fixes#199
coryrylan merged 2 commits into
mainfrom
topic-style-fixes

coryrylan commented Jul 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

coderabbitai Bot commented Jul 30, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 inconclusive)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 30, 2026

Uh oh!

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)
	scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentcolor 20%)

Uh oh!

Conversation

coryrylan commented Jul 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 inconclusive)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

coryrylan commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coryrylan commented Jul 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 30, 2026 •

edited

Loading