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.
This commit is contained in:
Jonas
2026-04-26 19:05:15 +02:00
parent 6740038e9a
commit 3c780e292b
2 changed files with 13 additions and 1 deletions
+12
View File
@@ -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;
}
+1 -1
View File
@@ -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
}