add pwa and no more layout shifts on login

app/views/layouts/auth.html.erb

@@ -1,7 +1,7 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="flex flex-col h-dvh">
     <div class="flex flex-col h-screen px-6 py-12 bg-surface">
-      <div class="grow flex flex-col justify-start mt-24">
+      <div class="flex flex-col items-center justify-center h-[30vh] min-h-[180px]">
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <div class="flex justify-center mb-6">
             <%= image_tag "logo-color.png", class: "w-16 mb-6" %>
@@ -13,8 +13,10 @@
             </h2>
           </div>
         </div>
+      </div>
 
-        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
+      <div class="flex-1">
+        <div class="sm:mx-auto sm:w-full sm:max-w-lg">
           <% if controller_name.in?(%w[sessions registrations]) %>
             <div class="flex justify-center mb-6">
               <div class="tab-item-active rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium w-full bg-alpha-black-25">

app/views/layouts/shared/_head.html.erb

@@ -15,11 +15,17 @@
   <meta name="viewport"
           content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-title" content="Maybe">
-
+  <meta name="application-name" content="Maybe">
   <meta name="msapplication-TileColor" content="#ffffff">
   <meta name="theme-color" content="#ffffff">
 
+  <!-- PWA Icons and Manifest -->
+  <%= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
+  <link rel="icon" href="/android-chrome-512x512.png" type="image/png">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
   <%= yield :head %>
 </head>

app/views/pwa/manifest.json.erb

@@ -1,22 +1,22 @@
 {
-  "name": "Maybe",
+  "name": "Maybe Finance",
+  "short_name": "Maybe",
   "icons": [
     {
-      "src": "/icon.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
     },
     {
-      "src": "/icon.png",
-      "type": "image/png",
+      "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
-      "purpose": "maskable"
+      "type": "image/png"
     }
   ],
   "start_url": "/",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
   "display": "standalone",
-  "scope": "/",
-  "description": "Maybe.",
-  "theme_color": "red",
-  "background_color": "red"
-}
+  "orientation": "portrait",
+  "description": "Personal finance management application"
+}