Fix dropdown visibility contrast issue#397
Open
hussainjamal760 wants to merge 7 commits intoopen-telemetry:mainfrom
Open
Fix dropdown visibility contrast issue#397hussainjamal760 wants to merge 7 commits intoopen-telemetry:mainfrom
hussainjamal760 wants to merge 7 commits intoopen-telemetry:mainfrom
Conversation
✅ Deploy Preview for otel-ecosystem-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aims to fix a low-contrast native <select> dropdown menu in the Java-agent telemetry/configuration UI so options are readable without requiring hover, improving overall accessibility and usability.
Changes:
- Adds a custom chevron icon and removes the native select arrow via
appearance-noneacross the affected selectors. - Updates select styling to use the app’s background/border tokens for better contrast consistency.
- Applies
bg-card/text-foregroundclasses to<option>elements in an attempt to improve dropdown menu readability.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx | Updates configuration builder select styling and adds a chevron indicator. |
| ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx | Restyles version/condition selects and adds chevron indicators. |
| ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx | Restyles configuration selector and adds a chevron indicator. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Comment on lines
+22
to
+23
| export const INPUT_CLASS = | ||
| "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20"; | ||
| "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]"; |
Comment on lines
+29
to
+30
| export const LIST_INPUT_CLASS = | ||
| "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20"; | ||
| "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]"; |
| value={currentVersion} | ||
| onChange={(e) => onVersionChange(e.target.value)} | ||
| className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none" | ||
| className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]" |
| id="config-select" | ||
| value={selectedWhen} | ||
| onChange={(e) => onWhenChange(e.target.value)} | ||
| className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark] sm:min-w-[200px]" |
Comment on lines
+63
to
+68
| <select | ||
| id="from-version-select" | ||
| value={fromVersion} | ||
| onChange={(e) => onFromVersionChange(e.target.value)} | ||
| className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]" | ||
| > |
Comment on lines
+91
to
+96
| <select | ||
| id="to-version-select" | ||
| value={toVersion} | ||
| onChange={(e) => onToVersionChange(e.target.value)} | ||
| className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]" | ||
| > |
| id="when-condition-select" | ||
| value={whenCondition} | ||
| onChange={(e) => onWhenConditionChange(e.target.value)} | ||
| className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]" |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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
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.
Issue: #396
Overview
This PR fixes a dropdown UI visibility issue where menu items were not clearly readable due to low contrast between the text and background.
The goal of this change is to improve readability, usability, and overall user experience by ensuring all dropdown options are clearly visible in their default state.
What was the issue?
The dropdown menu had a white background with text colors that blended in, making most items difficult to read unless hovered. This created a poor visual hierarchy and required unnecessary interaction just to view available options.
What has been improved?
Improved text and background contrast for better readability
Ensured all dropdown items are visible in default state (no hover required)
Enhanced visual clarity for faster scanning of options
Improved overall accessibility and user experience
User Impact
This change reduces confusion for users and improves interaction flow by making dropdown options immediately visible and easy to distinguish.
Testing
Verified dropdown visibility in default and hover states
Checked readability across multiple screen sizes
Ensured no layout or styling regressions introduced