From f895fb37c82f679b214007b1d01fae339adcb920 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 16 Apr 2026 10:43:06 +0200
Subject: [PATCH] [call-me] - fix: add custom dropdown arrow for select
 elements on Safari

---
 package-lock.json | 18 +++++++++---------
 package.json      |  4 ++--
 public/style.css  | 12 ++++++++++--
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e0ddd04..41054aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.3.35",
+    "version": "1.3.36",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.3.35",
+            "version": "1.3.36",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.7.0",
@@ -24,7 +24,7 @@
             },
             "devDependencies": {
                 "nodemon": "^3.1.14",
-                "prettier": "3.8.2"
+                "prettier": "3.8.3"
             }
         },
         "node_modules/@ngrok/ngrok": {
@@ -953,9 +953,9 @@
             "license": "MIT"
         },
         "node_modules/follow-redirects": {
-            "version": "1.15.11",
-            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
-            "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+            "version": "1.16.0",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+            "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
             "funding": [
                 {
                     "type": "individual",
@@ -1520,9 +1520,9 @@
             }
         },
         "node_modules/prettier": {
-            "version": "3.8.2",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.2.tgz",
-            "integrity": "sha512-8c3mgTe0ASwWAJK+78dpviD+A8EqhndQPUBpNUIPt6+xWlIigCwfN01lWr9MAede4uqXGTEKeQWTvzb3vjia0Q==",
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+            "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
             "dev": true,
             "license": "MIT",
             "bin": {
diff --git a/package.json b/package.json
index c4363d9..0f98f5e 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.3.35",
+    "version": "1.3.36",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",
@@ -35,6 +35,6 @@
     },
     "devDependencies": {
         "nodemon": "^3.1.14",
-        "prettier": "3.8.2"
+        "prettier": "3.8.3"
     }
 }
diff --git a/public/style.css b/public/style.css
index ea377a4..f1731c7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2097,7 +2097,13 @@ input {
     padding: 12px 16px;
     border: 2px solid var(--glass-border);
     border-radius: var(--border-radius);
-    background: rgba(30, 35, 50, 0.6);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: rgba(30, 35, 50, 0.6)
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E")
+        no-repeat right 16px center;
+    padding-right: 40px;
     color: var(--text-color);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
@@ -2108,7 +2114,9 @@ input {
 
 .setting-select:focus {
     border-color: var(--primary-color);
-    background: rgba(30, 35, 50, 0.8);
+    background: rgba(30, 35, 50, 0.8)
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E")
+        no-repeat right 16px center;
     box-shadow:
         0 0 0 4px rgba(59, 130, 246, 0.15),
         var(--shadow-md);