Responsive done for computer screens

src/app/dashboard/layout.tsx

@@ -6,7 +6,6 @@ import Script from 'next/script';
 
 import AccountDropdown from '../../components/AccountDropdown';
 import SideNav from "@/components/SideNav";
-import DashboardHeader from "@/components/DashboardHeader";
 import Image from 'next/image';
 import classnames from 'classnames';
 
@@ -34,12 +33,12 @@ export default async function DashboardLayout({ children }: { children: React.Re
         </div>
         <div className="w-full h-full flex items-start">
             <SideNav
-                maxWidth="max-w-31"
+                maxWidth="w-[16vw]"
                 bgColor="bg-atmosphere"
                 navItems={pageNavItems}
             />
-            <div className="w-full flex flex-col items-end">
-                <div className="h-20 w-[calc(100vw-124px)] flex justify-between items-center">
+            <div className="w-full min-w-[89vw] max-w-[95vw] flex flex-col items-end">
+                <div className="w-[90.15vw] h-20 flex justify-between items-center">
                     <div className={classnames('flex items-center')}>
                         <div className="-ml-8.5 z-2">
                             <Image
@@ -55,15 +54,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
                     </div>
                 </div>
                 <div className="w-full h-full flex justify-start">
-                    <div className="flex flex-col w-full ml-8 pt-5 2xl:pt-7">
-                        <DashboardHeader
-                            userDisplayName="Robert La'Blah"
-                        />
-                        <div className="flex w-full">
-                            {children}
-                            <div className="w-1/24 h-full" />
-                        </div>
-                    </div>
+                    {children}
                 </div>
             </div>
         </div>

src/app/dashboard/member/page.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 
+import DashboardHeader from "@/components/DashboardHeader";
 import FindProvider from '@/components/FindProvider';
 import InsuranceCardWidget from '@/components/InsuranceCard';
 import DeductableProgressWidget from '@/components/DeductableProgressWidget';
@@ -8,17 +9,22 @@ import BenefitsAAGWidget from '@/components/BenefitsAAGWidget';
 
 export default function Member() {
   return (
-    <div className="w-full">
-        <div className={classnames("w-full flex justify-start pt-4 z-2 space-x-4")}>
-            <div className="flex flex-col space-y-4">
-                <div className="flex space-x-4">
-                    <DeductableProgressWidget />
-                    <InsuranceCardWidget />
+    <div className="flex flex-col w-full pl-8 pt-5 2xl:pt-7">
+        <DashboardHeader
+            userDisplayName="Robert La'Blah"
+        />
+        <div className="flex w-full pr-23">
+            <div className={classnames("w-full flex flex-col xl:flex-row justify-stretch pt-4 z-2 space-x-4 space-y-4 xl:space-y-0")}>
+                <div className="flex flex-col space-y-4">
+                    <div className="flex space-x-4">
+                        <DeductableProgressWidget />
+                        <InsuranceCardWidget />
+                    </div>
+                    <FindProvider />
+                    <RecentClaimsWidget />
                 </div>
-                <FindProvider />
-                <RecentClaimsWidget />
+                <BenefitsAAGWidget />
             </div>
-            <BenefitsAAGWidget />
         </div>
     </div>
   )