improvements to the PWA and mobile layout

pages/settings/account.tsx

@@ -192,8 +192,8 @@ export default function Account() {
             ) : undefined}
           </div>
 
-          <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
-            <p className="mb-2 text-center">Profile Photo</p>
+          <div className="sm:row-span-2 sm:justify-self-center my-3">
+            <p className="mb-2 sm:text-center">Profile Photo</p>
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
               <ProfilePhoto
                 priority={true}
@@ -349,8 +349,8 @@ export default function Account() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
-          className="mt-2 mx-auto lg:mx-0"
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
         />
 
         <div>
@@ -375,7 +375,7 @@ export default function Account() {
 
         <Link
           href="/settings/delete"
-          className="mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit bg-red-500 hover:bg-red-400 cursor-pointer"
+          className="text-white w-full sm:w-fit flex items-center gap-2 py-2 px-4 rounded-md text-lg tracking-wide select-none font-semibold duration-100 bg-red-500 hover:bg-red-400 cursor-pointer"
         >
           <p className="text-center w-full">Delete Your Account</p>
         </Link>

pages/settings/appearance.tsx

@@ -97,7 +97,7 @@ export default function Appearance() {
         {/* <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
+          label="Save Changes"
           className="mt-2 mx-auto lg:mx-0"
         /> */}
       </div>

pages/settings/archive.tsx

@@ -85,8 +85,8 @@ export default function Archive() {
       <SubmitButton
         onClick={submit}
         loading={submitLoader}
-        label="Save"
-        className="mt-2 mx-auto lg:mx-0"
+        label="Save Changes"
+        className="mt-2 w-full sm:w-fit"
       />
     </SettingsLayout>
   );

pages/settings/password.tsx

@@ -77,8 +77,8 @@ export default function Password() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
-          className="mt-2 mx-auto lg:mx-0"
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>