New Responsive design

app/Domains/UserManagement/Views/Login.vue

@@ -26,32 +26,32 @@ const password = ref('')
 const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
 
 function resetPassword() {
-        window.location.href = '/reset-password';
-    }
+    window.location.href = '/reset-password';
+}
 </script>
 
 <template>
     <AppLayout title='Anmelden' :user="props.user" :navbar="props.navbar" :tenant="props.tenant" :currentPath="props.currentPath">
         <form method="POST" action="/login">
             <input type="hidden" name="_token" :value="csrfToken" />
-            <shadowed-box style="width: 50%; margin: 150px auto; padding: 20px;">
-                <table>
+            <shadowed-box class="login-box">
+                <table class="login-table">
                     <tr>
                         <th>Anmeldename</th>
                         <td>
-                            <input type="text" name="username" id="username"></input>
+                            <input type="text" name="username" id="username" />
                         </td>
                     </tr>
 
                     <tr>
                         <th>Passwort</th>
-                        <td><input type="password" name="password" id="password"></input></td>
+                        <td><input type="password" name="password" id="password" /></td>
                     </tr>
 
                     <tr>
-                        <td colspan="2">
-                            <input type="submit" value="Anmelden" style="margin-top: 20px;" />
-                            <input type="button" @click="resetPassword" style="margin-top: 20px; margin-left: 20px;" value="Passwort vergessen" />
+                        <td colspan="2" class="login-buttons">
+                            <input type="submit" value="Anmelden" />
+                            <input type="button" @click="resetPassword" value="Passwort vergessen" />
                         </td>
                     </tr>
                 </table>
@@ -61,8 +61,59 @@ function resetPassword() {
 </template>
 
 <style>
-    th {
-        width: 100px;
+.login-table th {
+    width: 100px;
+}
+
+.login-box {
+    width: 50%;
+    margin: 150px auto;
+    padding: 20px;
+}
+
+.login-buttons input {
+    margin-top: 20px;
+    margin-right: 10px;
+}
+
+/* Tablet */
+@media (max-width: 1023px) {
+    .login-box {
+        width: 70% !important;
+        margin: 80px auto !important;
+    }
+}
+
+/* Smartphone */
+@media (max-width: 639px) {
+    .login-box {
+        width: 95% !important;
+        margin: 30px auto !important;
+        padding: 15px !important;
     }
 
+    .login-table,
+    .login-table tbody,
+    .login-table tr,
+    .login-table th,
+    .login-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .login-table th {
+        padding-bottom: 4px;
+        text-align: left;
+    }
+
+    .login-table th::after {
+        content: none;
+    }
+
+    .login-buttons input {
+        width: 100%;
+        margin-top: 10px;
+        margin-right: 0;
+    }
+}
 </style>