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 */