From 61a322bbdcbc5460b9456cd5935a22f0bb1a29ad Mon Sep 17 00:00:00 2001
From: Neyl-123 <97339070+Neyl-123@users.noreply.github.com>
Date: Thu, 14 May 2026 16:13:02 +0200
Subject: [PATCH 1/2] Made <select> look the same on Linux

On Linux the <select> dropdowns had a white backgroud which was barely
readable with the white text
---
 .../src/components/ui/simple-select.tsx       | 67 ++++++++++++++++++
 .../src/views/settings/configuration.tsx      | 68 ++++++++-----------
 2 files changed, 96 insertions(+), 39 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/simple-select.tsx

diff --git a/apps/desktop/src/components/ui/simple-select.tsx b/apps/desktop/src/components/ui/simple-select.tsx
new file mode 100644
index 00000000..5b7372e8
--- /dev/null
+++ b/apps/desktop/src/components/ui/simple-select.tsx
@@ -0,0 +1,67 @@
+import { useState, useRef, useEffect } from "react";
+import { ChevronDown } from "lucide-react";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SimpleSelectProps {
+  id?: string;
+  value: string;
+  options: Option[];
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function SimpleSelect({ value, options, onChange, className = "", id }: SimpleSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find(opt => opt.value === value) || options[0];
+
+  return (
+    <div className={`relative ${className}`} ref={containerRef}>
+      <button
+        id={id}
+        type="button"
+        className="w-full h-full p-1 pl-2 pr-1 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer flex items-center justify-between gap-2"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span className="truncate whitespace-nowrap text-sm">{selectedOption?.label}</span>
+        <ChevronDown className="h-4 w-4 opacity-50 flex-shrink-0" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 w-full min-w-max right-0 mt-1 rounded-md border bg-zinc-800 text-white shadow-md outline-none">
+          <ul className="py-1 max-h-60 overflow-auto">
+            {options.map(option => (
+              <li
+                key={option.value}
+                className={`relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-zinc-700 focus:bg-zinc-700 ${
+                  option.value === value ? "bg-zinc-700" : ""
+                }`}
+                onClick={() => {
+                  onChange(option.value);
+                  setIsOpen(false);
+                }}
+              >
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/desktop/src/views/settings/configuration.tsx b/apps/desktop/src/views/settings/configuration.tsx
index bebe410e..e60549f3 100644
--- a/apps/desktop/src/views/settings/configuration.tsx
+++ b/apps/desktop/src/views/settings/configuration.tsx
@@ -4,6 +4,7 @@ import Config from "@/config";
 import { useConfigValue } from "@/hooks/use-config-value";
 import { emit } from "@tauri-apps/api/event";
 import { invoke } from "@tauri-apps/api/core";
+import { SimpleSelect } from "@/components/ui/simple-select";
 
 export const Configuration = () => {
   const { value: showOnlyTalkingUsers } = useConfigValue("showOnlyTalkingUsers");
@@ -68,27 +69,22 @@ export const Configuration = () => {
         >
           Anchor horizontal
         </label>
-        <select
+        <SimpleSelect
           id="horizontal"
           value={horizontal}
-          onChange={async event => {
-            const newTarget = event.target.value as "left" | "center" | "right";
+          onChange={async val => {
+            const newTarget = val as "left" | "center" | "right";
             await Config.set("horizontal", newTarget);
 
             await emit("config_update", await Config.getConfig());
           }}
-          className="w-40 p-1 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer"
-        >
-          <option value="left" className="bg-zinc-800 text-white">
-            Left
-          </option>
-          <option value="center" className="bg-zinc-800 text-white">
-            Center
-          </option>
-          <option value="right" className="bg-zinc-800 text-white">
-            Right
-          </option>
-        </select>
+          options={[
+            { value: "left", label: "Left" },
+            { value: "center", label: "Center" },
+            { value: "right", label: "Right" },
+          ]}
+          className="w-40"
+        />
       </div>
       <div className="flex items-center justify-between h-8 mx-2">
         <label
@@ -97,24 +93,21 @@ export const Configuration = () => {
         >
           Anchor vertical
         </label>
-        <select
+        <SimpleSelect
           id="vertical"
           value={vertical}
-          onChange={async event => {
-            const newTarget = event.target.value as "top" | "bottom";
+          onChange={async val => {
+            const newTarget = val as "top" | "bottom";
             await Config.set("vertical", newTarget);
 
             await emit("config_update", await Config.getConfig());
           }}
-          className="w-40 p-1 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer"
-        >
-          <option value="top" className="bg-zinc-800 text-white">
-            Top
-          </option>
-          <option value="bottom" className="bg-zinc-800 text-white">
-            Bottom
-          </option>
-        </select>
+          options={[
+            { value: "top", label: "Top" },
+            { value: "bottom", label: "Bottom" },
+          ]}
+          className="w-40"
+        />
       </div>
       <div className="flex items-center justify-between h-8 mx-2">
         <label
@@ -123,24 +116,21 @@ export const Configuration = () => {
         >
           Opacity target
         </label>
-        <select
+        <SimpleSelect
           id="opacityTarget"
           value={opacityTarget}
-          onChange={async event => {
-            const newTarget = event.target.value as "all" | "username-box";
+          onChange={async val => {
+            const newTarget = val as "all" | "username-box";
             await Config.set("opacityTarget", newTarget);
 
             await emit("config_update", await Config.getConfig());
           }}
-          className="p-1 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer"
-        >
-          <option value="all" className="bg-zinc-800 text-white">
-            Everything
-          </option>
-          <option value="username-box" className="bg-zinc-800 text-white">
-            Username background only
-          </option>
-        </select>
+          options={[
+            { value: "all", label: "Everything" },
+            { value: "username-box", label: "Username background only" },
+          ]}
+          className="w-56"
+        />
       </div>
       <div className="flex items-center justify-between h-8 mx-2">
         <label

From 090d7cbfb163b3bf1955c32e9d887b28aa7875fa Mon Sep 17 00:00:00 2001
From: Neyl-123 <97339070+Neyl-123@users.noreply.github.com>
Date: Thu, 14 May 2026 16:25:11 +0200
Subject: [PATCH 2/2] Made "top" the default for anchor vertical

Having anchor vertical set to "top" matches the behaviour of the latest
stable release and gives the user a more consistent experience
---
 apps/desktop/src/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/desktop/src/config.ts b/apps/desktop/src/config.ts
index 25bffe96..5389b501 100644
--- a/apps/desktop/src/config.ts
+++ b/apps/desktop/src/config.ts
@@ -31,7 +31,7 @@ export const DEFAULT_OVERLAYED_CONFIG: OverlayedConfig = {
   pin: false,
   horizontal: "right",
   // TODO: vertical alignment? i.e., if aligned to bottom, then the navbar should be at the bottom (and corner radius changes appropriately)
-  vertical: "bottom",
+  vertical: "top",
   telemetry: true,
   joinHistoryNotifications: false,
   showOnlyTalkingUsers: false,