From 19596b95894a312c02def93636051f2b751df87d Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 22 Sep 2024 21:52:42 -0400
Subject: [PATCH] make the user setting pages more responsive

---
 src/app/(pages)/dashboard/user/settings/page.tsx          | 2 +-
 src/components/dashboard/user/profile/avatar-setting.tsx  | 4 ++--
 src/components/dashboard/user/profile/email-setting.tsx   | 6 +++---
 src/components/dashboard/user/profile/tier-setting.tsx    | 4 ++--
 .../dashboard/user/profile/username-setting.tsx           | 6 +++---
 .../dashboard/user/settings/device/devices-setting.tsx    | 8 ++++----
 .../dashboard/user/settings/tfa/tfa-setting.tsx           | 4 ++--
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/(pages)/dashboard/user/settings/page.tsx b/src/app/(pages)/dashboard/user/settings/page.tsx
index 62ad084..b2c686f 100644
--- a/src/app/(pages)/dashboard/user/settings/page.tsx
+++ b/src/app/(pages)/dashboard/user/settings/page.tsx
@@ -12,7 +12,7 @@ import DashboardHeader from "@/components/dashboard/dashboard-header";
  * @return the page jsx
  */
 const UserSettingsPage = (): ReactElement => (
-    <main className="max-w-[47rem] flex flex-col gap-5">
+    <main className="max-w-[32rem] flex flex-col gap-5">
         <DashboardHeader title="Settings" />
 
         {/* Content */}
diff --git a/src/components/dashboard/user/profile/avatar-setting.tsx b/src/components/dashboard/user/profile/avatar-setting.tsx
index cd78951..dd65fd0 100644
--- a/src/components/dashboard/user/profile/avatar-setting.tsx
+++ b/src/components/dashboard/user/profile/avatar-setting.tsx
@@ -16,9 +16,9 @@ const AvatarSetting = (): ReactElement => {
         (state: UserState) => state.user
     );
     return (
-        <div className="px-5 flex items-center">
+        <div className="flex flex-col gap-3 sm:flex-row items-start sm:items-center">
             {/* Name & Description */}
-            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
+            <div className="w-72 md:w-80 lg:w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
                 <h1 className="text-lg font-bold">Avatar</h1>
                 <p className="max-w-64 text-sm opacity-75">
                     Set a profile picture for your account. This can be seen by
diff --git a/src/components/dashboard/user/profile/email-setting.tsx b/src/components/dashboard/user/profile/email-setting.tsx
index 7d3f773..992aa4a 100644
--- a/src/components/dashboard/user/profile/email-setting.tsx
+++ b/src/components/dashboard/user/profile/email-setting.tsx
@@ -16,9 +16,9 @@ const EmailSetting = (): ReactElement => {
         (state: UserState) => state.user
     );
     return (
-        <div className="px-5 flex items-center">
+        <div className="flex flex-col gap-3 lg:flex-row items-start lg:items-center">
             {/* Name & Description */}
-            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
+            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
                 <h1 className="text-lg font-bold">Email</h1>
                 <p className="max-w-64 text-sm opacity-75">
                     The email you use to login to this account.
@@ -27,7 +27,7 @@ const EmailSetting = (): ReactElement => {
 
             {/* Setting */}
             <Input
-                className="w-60 rounded-lg select-none"
+                className="max-w-60 rounded-lg select-none"
                 value={user?.email}
                 disabled
             />
diff --git a/src/components/dashboard/user/profile/tier-setting.tsx b/src/components/dashboard/user/profile/tier-setting.tsx
index 1747c6e..f9849de 100644
--- a/src/components/dashboard/user/profile/tier-setting.tsx
+++ b/src/components/dashboard/user/profile/tier-setting.tsx
@@ -18,9 +18,9 @@ const TierSetting = (): ReactElement => {
         (state: UserState) => state.user
     );
     return (
-        <div className="px-5 flex items-center">
+        <div className="flex flex-col gap-3 sm:flex-row items-start sm:items-center">
             {/* Name & Description */}
-            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
+            <div className="w-72 md:w-80 lg:w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
                 <h1 className="text-lg font-bold">Tier</h1>
                 <p className="max-w-64 text-sm opacity-75">
                     The tier of your account.
diff --git a/src/components/dashboard/user/profile/username-setting.tsx b/src/components/dashboard/user/profile/username-setting.tsx
index 35bb5be..5738df7 100644
--- a/src/components/dashboard/user/profile/username-setting.tsx
+++ b/src/components/dashboard/user/profile/username-setting.tsx
@@ -16,9 +16,9 @@ const UsernameSetting = (): ReactElement => {
         (state: UserState) => state.user
     );
     return (
-        <div className="px-5 flex items-center">
+        <div className="flex flex-col gap-3 lg:flex-row items-start lg:items-center">
             {/* Name & Description */}
-            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
+            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
                 <h1 className="text-lg font-bold">Username</h1>
                 <p className="max-w-64 text-sm opacity-75">
                     The username used to identify you on the app.
@@ -27,7 +27,7 @@ const UsernameSetting = (): ReactElement => {
 
             {/* Setting */}
             <Input
-                className="w-60 rounded-lg select-none"
+                className="max-w-60 rounded-lg select-none"
                 value={user?.username}
                 disabled
             />
diff --git a/src/components/dashboard/user/settings/device/devices-setting.tsx b/src/components/dashboard/user/settings/device/devices-setting.tsx
index 55ca41e..05f458e 100644
--- a/src/components/dashboard/user/settings/device/devices-setting.tsx
+++ b/src/components/dashboard/user/settings/device/devices-setting.tsx
@@ -41,18 +41,18 @@ const DevicesSetting = (): ReactElement => {
     }, [fetchDevices]);
 
     return (
-        <div className="px-5 flex flex-col gap-3.5 justify-center">
+        <div className="flex flex-col gap-3.5 justify-center">
             {/* Name & Description */}
-            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
+            <div className="max-w-96 flex flex-col gap-0.5 select-none pointer-events-none">
                 <h1 className="text-lg font-bold">Devices</h1>
-                <p className="w-[25rem] text-sm opacity-75">
+                <p className="max-w-[15rem] text-sm opacity-75">
                     Here is a list of devices logged into your Pulse App
                     account.
                 </p>
             </div>
 
             {/* Setting */}
-            <div className="w-[27.7rem] flex flex-col gap-2">
+            <div className="max-w-[27.7rem] flex flex-col gap-2">
                 {!devices ? (
                     <>
                         {Array.from({ length: 4 }, (_, index) => (
diff --git a/src/components/dashboard/user/settings/tfa/tfa-setting.tsx b/src/components/dashboard/user/settings/tfa/tfa-setting.tsx
index 0b8f8ef..65e24a7 100644
--- a/src/components/dashboard/user/settings/tfa/tfa-setting.tsx
+++ b/src/components/dashboard/user/settings/tfa/tfa-setting.tsx
@@ -101,9 +101,9 @@ const TFASetting = (): ReactElement => {
     };
 
     return (
-        <div className="px-5 flex items-center">
+        <div className="flex flex-col gap-3 xs:flex-row items-start xs:items-center">
             {/* Name & Description */}
-            <div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
+            <div className="w-80 md:w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
                 <h1 className="text-lg font-bold">Two-Factor Auth</h1>
                 <p className="max-w-64 text-sm opacity-75">
                     Enhance your account security with an extra layer of