feat: Improve SandboxDropdown theme styling and implement dropdown redesign and Consul sandbox launch reliability #2857
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
Updates sandbox card styles to ensure responsiveness across various screen sizes. Ensures cards take up full available width and height, and introduces a flex container for better layout. Addresses issues with card sizing and overflow on smaller screens.
Improves the sandbox dropdown by displaying relevant product information and providing a direct navigation link to the corresponding sandbox page. This change ensures that users can easily access and understand the available sandboxes for the current product, whether they are already on the sandbox page or navigating from elsewhere.
Removes inline styles from the sandbox dropdown component and applies CSS classes instead. This improves code readability and maintainability by centralizing styles in the CSS module.
Enhances the visual styling of the sandbox dropdown menu to provide a better user experience when the light theme is enabled. This includes adjusting background colors and hover states to ensure proper contrast and readability in the light theme. Adds a visual distinction for intro sandbox items and product sandbox list items on hover, improving visual consistency.
Updates lab ID validation to handle query parameters and track names. This ensures that labs are correctly identified and activated even when the ID contains additional information.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Younique98
changed the title
📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖 Ninety-eight Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
Updates the sandbox dropdown tests to match the actual rendered text in the UI. Also, fixes an issue where `isOnSandboxPage` was not correctly evaluating to false when expected.
Makes the sandbox dropdown item a button instead of a div to improve accessibility and keyboard navigation. Removes conditional rendering based on the current page. The sandbox page is now always rendered as a link.
Younique98
requested review from
a team and
LeahMarieBush
and removed request for
a team
Updates the sandbox dropdown button style to improve the user interface. It changes the button's appearance by adding a background color and a border, enhancing its visibility and making it more visually appealing.
Removes redundant comments in tests that do not add significant value or context, leading to cleaner and more readable test files.
Simplifies the logic for determining if the user is currently on a sandbox page. The previous check included unnecessary conditional logic that has been removed for a more concise and readable expression.
There was a problem hiding this comment.
Code looks good and functionality is working well! I noticed a few small design tweaks that need to get fixed:
Dark mode has the incorrect background color for the first item when it is not in a hover state. Light mode does not have this issue
The spacing between the designs and the preview link is a bit different. The preview link has a bit more spacing and room on the left side compared to the design screenshot
Preview:
Design:
|
@LeahMarieBush I think ijust had messed up the color lol call myself fixing one thing and broke it lol |
Improves the visual appearance of the sandbox dropdown by adjusting padding and margins for better spacing. Adds dynamic styling to the intro sandbox items based on the current theme, ensuring appropriate background colors and borders for both light and dark themes. This change enhances the user experience by providing a more visually appealing and consistent interface.
There was a problem hiding this comment.
The dark mode issue looks great now! Thanks for fixing that.
There's just two spots I think the padding could be updated. I think there should be a bit more padding around the boxes (dropdownContainerInner) and less vertical padding inside the top item in the dropdown. Once those are fixed, I think this will match the designs and be good to go!
Improves the visual appearance of the sandbox dropdown by adjusting padding and spacing. This change aims to provide a more balanced and visually appealing layout within the dropdown. It adjusts padding in several areas including the dropdown container, and link items.
LeahMarieBush
approved these changes
Oct 2, 2025
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.
🔗 Relevant links
Preview link 🔎
Asana task 🎟️
🗒️ What
Updated SandboxDropdown to use project theme conventions for light mode styling.
Ensured intro box and sandbox cards have a light background in light mode when hovering on card.
Refactored click behavior for sandbox cards to reliably launch all products, including Consul.
Unified embed logic and improved lab matching for Consul sandboxes.
Improved visual consistency and accessibility of dropdown and cards.
🤷 Why
Needed to fix inconsistent theme styling and hover states in the dropdown.
Consul sandboxes were not launching reliably from the dropdown due to labId/instruqtTrack mismatches.
Ensured all products launch correctly and the dropdown is visually consistent.
🛠️ How
Used useTheme and .theme-light class for theme detection.
Updated CSS to use project tokens and .theme-light selectors.
Refactored click handler and lab matching logic in both dropdown and instruqt-lab context.
Compared previous and current logic to ensure robust, unified behavior.
📸 Design Screenshots
Screen.Recording.2025-10-01.at.3.12.57.PM.mov
🧪 Testing
Open the SandboxDropdown in light and dark mode; verify correct background styling.
Click sandbox cards for all products, including Consul; verify correct sandbox launches.
Confirm accessibility and keyboard navigation.
Review dropdown visual consistency and hover states.