diff --git a/public/styles/main.css b/public/styles/main.css index fe23e35..ecfe8e0 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -2393,6 +2393,16 @@ p { appearance: none; } +/* Add dropdown arrow for select elements in param-input */ +.param-input[type="select"], +select.param-input { + padding-right: 2rem; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 0.6rem center; + background-size: 12px 12px; +} + .param-input option { background: #1f2937; color: var(--text-primary); @@ -2404,6 +2414,15 @@ p { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15); } +/* Ensure arrow stays visible on focus for select elements */ +.param-input[type="select"]:focus, +select.param-input:focus { + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 0.6rem center; + background-size: 12px 12px; +} + .endpoint-params.none { opacity: 1; font-size: 0.85rem; @@ -2642,6 +2661,23 @@ p { background-position: right 0.5rem center; background-size: 10px 10px; } + + /* Responsive styles for param-input select elements */ + .param-input[type="select"], + select.param-input { + padding-right: 1.75rem; + background-position: right 0.5rem center; + background-size: 10px 10px; + } + + /* Ensure arrow stays visible on focus for mobile */ + .param-input[type="select"]:focus, + select.param-input:focus { + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 0.5rem center; + background-size: 10px 10px; + } } /* Endpoint header mobile wrapping */