[PATCH v1 07/17] chore(responsive): adjust styling

[Muhammad Rizki <kiizuha@gnuweeb.org>]

Previously, some text sizes were too large on mobile devices.
This commit adjusts the text sizes to be more appropriate for mobile
devices and add object-cover on avatar UI.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/lib/components/ui/avatar/avatar-image.svelte  | 2 +-
 src/lib/components/ui/avatar/avatar.svelte        | 2 +-
 src/lib/components/ui/input/input-password.svelte | 2 +-
 src/lib/components/ui/input/input.svelte          | 2 +-
 src/routes/+page.svelte                           | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
index 0878ef3..47e9b00 100644
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -15,7 +15,7 @@
   bind:ref
   {src}
   {alt}
-  class={cn("aspect-square h-full w-full", className)}
+  class={cn("aspect-square h-full w-full object-cover", className)}
   draggable={false}
   {...restProps}
 />
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
index 019894e..eaa5692 100644
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -13,6 +13,6 @@
 <AvatarPrimitive.Root
   bind:loadingStatus
   bind:ref
-  class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+  class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full border-2 border-muted", className)}
   {...restProps}
 />
diff --git a/src/lib/components/ui/input/input-password.svelte b/src/lib/components/ui/input/input-password.svelte
index 6e2c1ab..d218e32 100644
--- a/src/lib/components/ui/input/input-password.svelte
+++ b/src/lib/components/ui/input/input-password.svelte
@@ -22,7 +22,7 @@
     type="button"
     variant="ghost"
     size="sm"
-    class="group absolute right-0 top-0 h-full !px-2 transition duration-200 hover:bg-transparent"
+    class="group absolute right-0 top-0 h-full !px-2 hover:bg-transparent"
     onclick={() => (showPassword = !showPassword)}
     disabled={btnDisabled}
   >
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 0ea1f94..928297c 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -14,7 +14,7 @@
 <input
   bind:this={ref}
   class={cn(
-    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive md:text-sm",
+    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive",
     className
   )}
   bind:value
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9f82bad..eeadde5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -57,8 +57,8 @@
   <Card.Root class="w-full max-w-lg">
     <form method="POST" use:enhance>
       <Card.Header class="flex items-center justify-center space-y-1">
-        <Card.Title class="text-2xl">GNU/Weeb Mail Login</Card.Title>
-        <Card.Description>Proceed login to manager your email account</Card.Description>
+        <Card.Title class="text-xl text-center lg:text-2xl">GNU/Weeb Mail Login</Card.Title>
+        <Card.Description class="text-center">Proceed login to manage your email account</Card.Description>
 
         {#if isError() && !isCredentialInvalid()}
           <span class="text-sm font-medium text-destructive">
-- 
Muhammad Rizki