fix: use system as defaultTheme (#60)

* fix: use system as defaultTheme

* chore: auto-fix linting and formatting issues

* fix: AnimatedMan position on login page

* fix: login form overflow on mobile

* fix: theme selected value display overflow

* fix: dropdown menu username overflow

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>

src/components/header.tsx

@@ -18,6 +18,7 @@ import {
 import { useAuth } from "@/hooks/useAuth"
 import { useMainStore } from "@/hooks/useMainStore"
 import { useMediaQuery } from "@/hooks/useMediaQuery"
+import { cn } from "@/lib/utils"
 import i18next from "i18next"
 import { LogOut, Settings, User2 } from "lucide-react"
 import { DateTime } from "luxon"
@@ -72,7 +73,12 @@ export default function Header() {
             <NavigationMenu className="flex flex-col items-start relative max-w-5xl mx-auto">
                 {!disableAnimatedMan && (
                     <img
-                        className="absolute -right-0 z-[9999] top-11 w-20 scale-100 pointer-events-none"
+                        className={cn(
+                            "absolute right-0 z-[9999] top-11 w-20 scale-100 pointer-events-none",
+                            {
+                                "top-2 right-4": location.pathname === "/dashboard/login",
+                            },
+                        )}
                         alt={"animated-man"}
                         src={"/dashboard/animated-man.webp"}
                     />
@@ -110,7 +116,7 @@ export default function Header() {
                                             </Avatar>
                                         </DropdownMenuTrigger>
                                         <DropdownMenuContent className="w-32">
-                                            <DropdownMenuLabel>
+                                            <DropdownMenuLabel className="break-all">
                                                 {profile.username}
                                             </DropdownMenuLabel>
                                             <DropdownMenuSeparator />

src/routes/login.tsx

@@ -42,7 +42,7 @@ function Login() {
     const { t } = useTranslation()
 
     return (
-        <div className="mt-28 max-w-sm m-auto">
+        <div className="mt-28 sm:max-w-sm m-auto max-w-fit">
             <Form {...form}>
                 <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                     <FormField

src/routes/root.tsx

@@ -40,7 +40,7 @@ export default function Root() {
     }
 
     return (
-        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
             <section className="text-sm mx-auto h-full flex flex-col justify-between">
                 <div>
                     <Header />

src/routes/settings.tsx

@@ -167,7 +167,7 @@ export default function SettingsPage() {
                                             }}
                                         >
                                             <FormControl>
-                                                <SelectTrigger>
+                                                <SelectTrigger className="py-8">
                                                     <SelectValue placeholder={t("SelectTheme")} />
                                                 </SelectTrigger>
                                             </FormControl>