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:
@@ -784,3 +784,15 @@ pre {
|
|||||||
font-size: var(--font-size-xs);
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const adminCount = computed(
|
|||||||
)
|
)
|
||||||
|
|
||||||
const filteredUsers = computed(() => {
|
const filteredUsers = computed(() => {
|
||||||
const query = searchQuery.value.trim().toLowerCase()
|
const query = (searchQuery.value ?? '').trim().toLowerCase()
|
||||||
if (query.length === 0) {
|
if (query.length === 0) {
|
||||||
return users.value
|
return users.value
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user