From b6ea5917832a91f37830800e8e69d8252d25a6ee Mon Sep 17 00:00:00 2001 From: Idris Date: Fri, 3 Oct 2025 02:00:45 +0300 Subject: [PATCH] fix: improve subject dropdown visibility in your contact form - Add global CSS rules for select option elements to ensure proper rendering - Use CSS variables for background and foreground colors in both light/dark modes - Add color-scheme property to select elements for better browser compatibility - Remove inline styles and use cleaner Tailwind classes - Ensure dropdown options are clearly visible when users interact with the field --- package-lock.json | 12 +++++++++++- src/app/globals.css | 11 +++++++++++ src/components/sections/contact-section.tsx | 4 ++-- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5ed4447..b4cc2d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1366,6 +1366,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.1.tgz", "integrity": "sha512-ePapxDL7qrgqSF67s0h9m412d9DbXyC1n59O2st+9rjuuamWsZuD2w55rqY12CbzsZ7uVXb5Nw0gEp9Z8MMutQ==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1438,6 +1439,7 @@ "integrity": "sha512-zczrHVEqEaTwh12gWBIJWj8nx+ayDcCJs06yoNMY0kwjMWDM6+kppljY+BxWI06d2Ja+h4+WdufDcwMnnMEWmg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", @@ -1876,6 +1878,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2503,7 +2506,8 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -3022,6 +3026,7 @@ "integrity": "sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -3196,6 +3201,7 @@ "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.8", @@ -6947,6 +6953,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -6969,6 +6976,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -7923,6 +7931,7 @@ "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -8092,6 +8101,7 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/src/app/globals.css b/src/app/globals.css index fac0ed8..1168ada 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -57,3 +57,14 @@ html, body { /* Keep a simple utility for a hand font (notes) */ .font-hand { font-family: var(--font-hand, var(--font-display)); } + +/* Fix select dropdown options visibility */ +select option { + background-color: var(--background); + color: var(--foreground); + padding: 8px 12px; +} + +select { + color-scheme: light dark; +} diff --git a/src/components/sections/contact-section.tsx b/src/components/sections/contact-section.tsx index 577e028..b6f5a10 100644 --- a/src/components/sections/contact-section.tsx +++ b/src/components/sections/contact-section.tsx @@ -306,10 +306,10 @@ export function ContactSection() { name="subject" value={formData.subject} onChange={handleInputChange} - className="w-full px-4 py-3 rounded-2xl border border-border bg-background focus:outline-none focus:ring-2 focus:ring-foreground/10 focus:border-foreground/30 transition-colors" + className="w-full px-4 py-3 pr-10 rounded-2xl border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/10 focus:border-foreground/30 transition-colors cursor-pointer hover:border-foreground/50 [&>option]:bg-background [&>option]:text-foreground [&>option]:py-2" > - +