[SameDesu123]

PR Checklist

• Required Checks
  • Have you added type definitions?
  • Have you tested your changes?
  • Have you checked that it won't break any existing features?
• If your PR uses models¹, check the following:
  • Have you checked if it works normally in all models?
  • Have you checked if it works normally in all web, local, and node-hosted versions? If it doesn't, have you blocked it in those versions?
• If your PR is highly AI generated², check the following:
  • Have you understood what the code does?
  • Have you cleaned up any unnecessary or redundant code?
  • Is it not a huge change?
    • We currently do not accept highly AI generated PRs that are large changes.

Summary

In Safari (and other WebKit browsers), dropdowns render with a fixed-height native menulist that ignores the vertical padding, so the selected text is cut off in half. This replaces the native appearance with a custom-drawn arrow so the selects size correctly.

Related Issues

None

Changes

• Add a .risu-select class in styles.css that sets appearance: none and draws a chevron in currentColor, with a native-arrow fallback for forced-colors mode.
• Apply it to SelectInput and the remaining raw <select> elements.

Impact

CSS-only. Dropdowns now show the custom chevron instead of the native arrow in every browser; layout and behavior are otherwise unchanged.

Additional Notes

Tested on a Vercel preview in Safari; pnpm check passes.

Footnotes

1. Modifies the behavior of prompting, requesting, or handling responses from AI models. ↩

2. Over 80% of the code is AI generated. ↩

[SameDesu123]

nightly.risuai.xyz	(fixed) vercel build

[cubicj]

I went through 9499b87 on this. Your before and after screenshots show the clipping gone. With appearance: none the chevron is drawn in currentColor, so it matches each select's text color, and the class covers SelectInput and the four raw selects, which are all the <select> elements in the source.

I rendered the selects in WebKitGTK at each SelectInput size, and the chevron stays inside the reserved right padding without touching the text. pnpm check, pnpm test, and pnpm build are clean on this head.

Approving — thanks for the contribution!

[sub-hub]

Thanks for the PR.
Dropping the native appearance and drawing the chevron in currentColor fixes the clipping without touching behavior, and the forced-colors fallback keeps an arrow visible in high-contrast mode.