make the user setting pages more responsive

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 */}

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

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
             />

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.

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
             />

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) => (

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