Skip to content

πŸ› Bug: Dropdown Arrow Flush Against Right EdgeΒ #2309

@Tushar8466

Description

@Tushar8466

Describe the bug

The arrow/chevron icon of the "Select a Schema" dropdown is visually attached to the right edge of the dropdown with no padding or spacing. This makes the UI look unpolished and inconsistent with standard dropdown styling conventions.

Steps To Reproduce

  1. Navigate to the "Get Started > Create your first schema" page
  2. Observe the "Select a Schema" dropdown in the JSON Schema section

Expected Behavior

The dropdown arrow should have adequate right-side padding/spacing so it doesn't appear flush against the border.

Actual Behavior:
The arrow icon is stuck to the far right edge of the dropdown with no visible padding.

Suggested Fix:
Add padding-right to the <select> element or its wrapper to give the arrow icon breathing room. For example:

select {
  padding-right: 2rem;
}

Screenshots

Image

Device Information [optional]

- OS:MacOS
- Browser:Chrome
- version:

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

Yes

Metadata

Metadata

Assignees

Labels

Status: AcceptedIt's clear what the subject of the issue is about, and what the resolution should be.πŸ› BugIndicates that the issue is a bug or defect.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions