Update dependency eslint-config-next to v14.2.22

Reviewed-on: #19

package.json

@@ -34,7 +34,7 @@
     "lossless-json": "^4.0.2",
     "lucide-react": "^0.445.0",
     "luxon": "^3.5.0",
-    "next": "14.2.13",
+    "next": "14.2.14",
     "next-client-cookies": "^1.1.1",
     "next-themes": "^0.3.0",
     "qrcode.react": "^4.0.1",
@@ -55,8 +55,8 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^9.0.0",
-    "eslint-config-next": "14.2.13",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.22",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "turnstile-types": "^1.2.2",

src/app/(pages)/dashboard/layout.tsx

@@ -18,7 +18,9 @@ const DashboardLayout = ({
         <OrganizationProvider>
             <div className="min-h-screen flex">
                 <Sidebar />
-                <div className="w-full mx-7 my-6">{children}</div>
+                <div className="w-full mx-4 sm:mx-7 my-3 sm:my-5 transition-all transform-gpu">
+                    {children}
+                </div>
             </div>
         </OrganizationProvider>
     </UserProvider>

src/app/(pages)/dashboard/user/billing/page.tsx

@@ -10,7 +10,7 @@ import DashboardHeader from "@/components/dashboard/dashboard-header";
  * @return the page jsx
  */
 const UserBillingPage = (): ReactElement => (
-    <main className="w-[47rem] flex flex-col gap-5">
+    <main className="max-w-[47rem] flex flex-col gap-5">
         <DashboardHeader title="Billing" />
 
         {/* Content */}

src/app/(pages)/dashboard/user/profile/page.tsx

@@ -14,7 +14,7 @@ import DashboardHeader from "@/components/dashboard/dashboard-header";
  * @return the page jsx
  */
 const UserProfilePage = (): ReactElement => (
-    <main className="w-[47rem] flex flex-col gap-5">
+    <main className="max-w-[47rem] flex flex-col gap-5">
         <DashboardHeader title="My Profile" />
 
         {/* Content */}

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="w-[47rem] flex flex-col gap-5">
+    <main className="max-w-[32rem] flex flex-col gap-5">
         <DashboardHeader title="Settings" />
 
         {/* Content */}

src/components/dashboard/sidebar/sidebar.tsx

@@ -30,7 +30,7 @@ const Sidebar = (): ReactElement => {
                 href="/dashboard"
                 draggable={false}
             >
-                <Branding size="xs" />
+                <Branding className="pointer-events-none" size="xs" />
                 <h1 className="hidden opacity-0 md:flex md:opacity-100 text-2xl font-bold group-hover:opacity-75 transition-all transform-gpu">
                     Pulse App
                 </h1>

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