From 3c780e292bf65954ee2ac57d697ce0a1a3c54463 Mon Sep 17 00:00:00 2001
From: Jonas <77726472+kobolol@users.noreply.github.com>
Date: Sun, 26 Apr 2026 19:05:15 +0200
Subject: [PATCH] Improve tooltip styles and guard search query

Add Vuetify tooltip CSS for better contrast and readability in light/dark themes (sets background/text colors, font-size, weight, padding, radius, shadow and forces opacity) in GUI/src/global.css. In AdminUsers.vue, guard against null/undefined `searchQuery.value` by using `searchQuery.value ?? ''` before trimming and lowercasing to prevent runtime errors when the query is unset.
---
 GUI/src/global.css                  | 12 ++++++++++++
 GUI/src/routes/admin/AdminUsers.vue |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/GUI/src/global.css b/GUI/src/global.css
index a2255ac..10941f2 100644
--- a/GUI/src/global.css
+++ b/GUI/src/global.css
@@ -784,3 +784,15 @@ pre {
     font-size: var(--font-size-xs);
   }
 }
+
+/* Vuetify Tooltip – lesbarer Kontrast in Light & Dark */
+.v-tooltip > .v-overlay__content {
+  background-color: var(--color-text) !important;
+  color: var(--color-bg) !important;
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm, 6px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  opacity: 1 !important;
+}
diff --git a/GUI/src/routes/admin/AdminUsers.vue b/GUI/src/routes/admin/AdminUsers.vue
index 18add17..cafe45f 100644
--- a/GUI/src/routes/admin/AdminUsers.vue
+++ b/GUI/src/routes/admin/AdminUsers.vue
@@ -26,7 +26,7 @@ const adminCount = computed(
 )
 
 const filteredUsers = computed(() => {
-  const query = searchQuery.value.trim().toLowerCase()
+  const query = (searchQuery.value ?? '').trim().toLowerCase()
   if (query.length === 0) {
     return users.value
   }