feat: improve UI and warning on mobile

app/src/views/ChooseUsernamePage.vue

@@ -45,12 +45,12 @@ async function handleSubmit({ username, success, error }) {
 }
 </script>
 <template>
-  <div class="relative w-screen h-screen">
+  <div class="w-screen h-screen">
     <Background class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-1/3">
+      <div class="w-fit">
         <AuthForm
           @onSubmit="handleSubmit"
           @onChange="check"

app/src/views/LoginPage.vue

@@ -32,12 +32,12 @@ const handleLogin = async ({ username, password, success, error }) => {
 }
 </script>
 <template>
-  <div class="relative w-screen h-screen">
+  <div class="w-screen h-screen">
     <Background class="w-full h-full" />
     <div
-      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+      class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-1/3">
+      <div class="w-fit">
         <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
     </div>

app/src/views/RegisterPage.vue

@@ -65,12 +65,12 @@ async function check({ username, email, password, error }) {
 }
 </script>
 <template>
-  <div class="relative w-screen h-screen">
+  <div class="w-screen h-screen">
     <Background class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-1/3">
+      <div class="w-fit">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"