Fix/select dropdown arrow v3

[Tushar8466]

What kind of change does this PR introduce?
Bug fix - replaced native browser dropdown arrow with a custom styled arrow for better cross-browser consistency and improved spacing.

fixes #2309

Checklist

• I have read the contributing guidelines
• My changes are consistent with the project's coding style
• I have tested my changes locally

[github-actions]

Hi @Tushar8466! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: issue reference

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[Copilot]

Pull request overview

This PR aims to improve cross-browser consistency of the <select> UI in the Getting Started page by replacing the native dropdown arrow with a custom-styled arrow and adjusting spacing.

Changes:

• Adds custom dropdown arrow styling/markup around the JSON Schema and JSON Instance <select> controls.
• Tweaks layout/spacing (e.g., select wrapper flex alignment and button right offset).
• (Currently) introduces unresolved merge conflict markers in the component.

Comments suppressed due to low confidence (2)

components/GettingStarted.tsx:146

• Unresolved git merge conflict markers (<<<<<<<, =======, >>>>>>>) are committed here, which will break TypeScript/JSX compilation. Resolve the conflict and keep a single intended version of this JSON Schema select block (including a single, unique id for the associated label/select).

<<<<<<< HEAD
          <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
            <h2 className='text-h6 font-semibold mb-1 text-slate-900 dark:text-white'>
              JSON Schema
            </h2>

components/GettingStarted.tsx:238

• Unresolved git merge conflict markers (<<<<<<<, =======, >>>>>>>) are present in this JSON Instance select section and will prevent the file from compiling. Resolve the conflict and leave only one version of the JSX (also ensuring the label is correctly bound to a unique select id).

<<<<<<< HEAD
          <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
            <h2 className='text-h6 font-semibold mb-1 text-slate-900 dark:text-white'>
              JSON Instance
            </h2>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

The button still contains unresolved merge conflict markers around the className (right-0 vs right-4). This will break compilation; resolve the conflict and pick the intended positioning class so only one className remains.

Suggested change

	<<<<<<< HEAD
	className='absolute right-0 my-4 text-[17px] bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md'
	=======
	className='absolute right-4 my-4 text-[17px] bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md'
	>>>>>>> 3e02b34 (fix: improve select dropdown appearance with custom arrows)
	className='absolute right-4 my-4 text-[17px] bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md'

[github-actions]

Hi @Tushar8466! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: issue reference

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Tushar8466! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: issue reference

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	ab7ffb9

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (517455c) to head (ab7ffb9).

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2329   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           30        30           
  Lines          672       672           
  Branches       211       211           
=========================================
  Hits           672       672           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Utkarsh-123github]

Hi @Tushar8466
Please add a good detailed description of your changes.
Also if possible, then please add recordings/screenshots before and after changes. This gives a better clarity of your approach and solution.
Thanks!

[Tushar8466]

Before

After

[Tushar8466]

What kind of change does this PR introduce?
Bug fix - replaced the native browser dropdown arrow in the Getting Started page select elements with a custom styled arrow to fix inconsistent spacing and appearance across different browsers.

fixes #2329

What is the current behavior?
The native browser dropdown arrow appears flush against the right edge of the select elements with no margin, causing poor visual appearance. The arrow styling also varies across different browsers, leading to inconsistent UX.

What is the new behavior?

• Native browser arrow is hidden using appearance-none
• A custom styled ▾ arrow is added with proper spacing using absolute positioning
• Added pr-8 padding to prevent text from overlapping the custom arrow
• Both Schema and Instance select dropdowns are updated consistently
• Unique IDs (schema-examples and instance-examples) are added to select elements to fix duplicate ID accessibility issue
• Labels are properly linked to their select elements using htmlFor

Checklist

• I have read the contributing guidelines
• My changes are consistent with the project's coding style
• I have tested my changes locally

[Tushar8466]

@Utkarsh-123github I have updated the PR description with detailed information including the current behavior, new behavior, all changes made, and before/after comparison. I have also added before and after screenshots to visually demonstrate the fix. Please review when you get a chance. Thanks!