[deploy] improve dashboard usability and form visibility

frontend/src/components/layout/Header.tsx

@@ -45,20 +45,20 @@ export function Header() {
 
       <div className="flex items-center gap-2 shrink-0">
         {statusMessage && (
-          <Chip color="warning" size="sm" variant="flat" className="max-w-[200px]">
+          <Chip color="warning" size="sm" variant="solid" className="max-w-[220px]">
             <span className="truncate">{statusMessage}</span>
           </Chip>
         )}
 
         <Tooltip content={dark ? 'Helles Design' : 'Dunkles Design'} placement="bottom">
-          <Button isIconOnly radius="lg" size="sm" variant="light" onPress={toggle}>
+          <Button isIconOnly radius="lg" size="sm" variant="bordered" onPress={toggle}>
             {dark ? <Sun size={16} /> : <Moon size={16} />}
           </Button>
         </Tooltip>
 
         <Dropdown placement="bottom-end">
           <DropdownTrigger>
-            <Button className="gap-2" radius="lg" size="sm" variant="light">
+            <Button className="gap-2" radius="lg" size="sm" variant="bordered">
               <Avatar name={user?.username} size="sm" className="size-6" />
               <span className="hidden sm:inline text-sm">{user?.username}</span>
               <ChevronDown size={14} />