Optimization for mobile login - register - verify

resources/views/auth/layouts/app.blade.php

@@ -7,7 +7,7 @@
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name', 'Mesort') }}</title>
 
     <!-- Scripts -->
     <script src="{{ asset('js/manifest.js') }}"></script>

resources/views/auth/passwords/email.blade.php

@@ -2,9 +2,9 @@
 
 @section('content')
 
-    <div class="flex items-center justify-center h-screen z-10">
 
-        <div class="bg-white p-4 rounded overflow-hidden shadow-lg w-1/3">
+    <div class="flex sm:items-start md:items-center md:justify-center h-screen">
+        <div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
             @if (session('status'))
                 <div class="flex relative px-3 py-3 mb-4 border text-green-800 bg-green-200">
                     {{ session('status') }}
@@ -29,15 +29,14 @@
 
                 <div class="mb-4 flex flex-wrap">
                     <label for="email"
-                           class="md:w-1/3 pl-4 pt-2 pb-2 mb-0 leading-normal text-md-right">{{ __('E-Mail Address') }}</label>
+                           class="w-full mr-2 pl-1 pt-2 pb-2 mb-0 leading-normal">{{ __('E-Mail Address') }}</label>
+
 
-                    <div class="md:w-1/2">
                     <input id="email" type="email"
                            class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-grey-darker border border-grey rounded{{ $errors->has('email') ? ' bg-red-dark' : '' }}"
                            name="email" value="{{ old('email') }}" required>
 
                 </div>
-                </div>
 
 
                 @if ($errors->has('email'))

resources/views/auth/passwords/resetPassword.blade.php

 @extends('auth.layouts.app')
 
 @section('content')
-    <div class="flex items-center justify-center h-screen z-10">
 
-        <div class="bg-white p-4 rounded overflow-hidden shadow-lg w-1/3">
+    <div class="flex sm:items-start md:items-center md:justify-center h-screen">
+        <div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
             @if (session('status'))
                 <div class="flex relative px-3 py-3 mb-4 border text-green-800 bg-green-200">
                     {{ session('status') }}
@@ -31,7 +31,7 @@
                 <input type="hidden" value="{{$email}}" name="email"></input>
                 <div class="mb-4 flex flex-wrap">
                     <label for="email"
-                           class="md:w-1/3 pl-4 pt-2 pb-2 mb-0 leading-normal">{{ __('E-Mail Address') }}</label>
+                           class="md:w-1/3 mr-2 pl-4 pt-2 pb-2 mb-0 leading-normal">{{ __('E-Mail Address') }}</label>
 
                     <div class="md:w-1/2">
                         <input id="email" disabled type="email" value="{{$email}}"

resources/views/auth/passwords/verify.blade.php

@@ -2,10 +2,8 @@
 
 @section('content')
     
-
-    <div class="flex items-center justify-center h-screen z-10">
-
-        <div class="bg-white p-4 rounded overflow-hidden shadow-lg w-1/3">
+    <div class="flex sm:items-start md:items-center md:justify-center h-screen">
+        <div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
             @if (session('status'))
                 <div class="flex relative px-3 py-3 mb-4 border text-green-800 bg-green-200">
                     {{ session('status') }}

resources/views/auth/register.blade.php

 @extends('auth.layouts.app')
 
 @section('content')
-    <div class="flex items-center justify-center h-screen">
 
-        <div class="bg-white p-4 rounded overflow-hidden shadow-lg  w-1/3">
+    <div class="flex sm:items-start md:items-center md:justify-center h-screen">
+        <div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
             <form method="POST" action="{{ route('register') }}">
                 @csrf
 

resources/views/auth/verify.blade.php

@@ -2,9 +2,9 @@
 
 @section('content')
 
-    <div class="flex items-center justify-center h-screen z-10">
 
-        <div class="bg-white p-4 rounded overflow-hidden shadow-lg w-1/3">
+    <div class="flex sm:items-start md:items-center md:justify-center h-screen">
+        <div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
 
             <h1 class="text-4xl pb-2 m-auto max-w-full font-extrabold text-center">{{ __('Verify Your Email Address') }}</h1>
             <div class="text-justify">