feat: responsive for web with sidebar and different styling for test ui on web

src/pages/student/Profile.tsx

@@ -19,6 +19,8 @@ const DOTS = [
 const STYLES = `
   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
+  :root { --content-max: 1100px; }
+
   .pf-screen {
     min-height: 100vh;
     background: #fffbf4;
@@ -55,6 +57,34 @@ const STYLES = `
     display: flex; flex-direction: column; gap: 1.5rem;
   }
 
+  /* Desktop / web layout: wider container and two-column grid */
+  @media (min-width: 900px) {
+    .pf-inner {
+      max-width: var(--content-max);
+      padding: 2.5rem 2.5rem 4rem;
+      display: grid;
+      grid-template-columns: 1fr 420px;
+      grid-template-rows: auto;
+      gap: 1.5rem 2rem;
+      align-items: start;
+    }
+
+    /* Hero spans full width */
+    .pf-hero { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; }
+
+    /* Keep page title centered across the full layout */
+    .pf-page-title { grid-column: 1 / -1; }
+
+    /* Place first section (Account) in left column */
+    .pf-inner > section:nth-of-type(1) { grid-column: 1 / 2; }
+
+    /* Right column wrapper (Legal + Support) */
+    .pf-right-col { grid-column: 2 / 3; display: flex; flex-direction: column; gap: 1.5rem; }
+
+    /* Make signout button centered and constrained width */
+    .pf-signout-btn { grid-column: 1 / -1; justify-self: center; width: 420px; }
+  }
+
   @keyframes pfPopIn {
     from { opacity:0; transform: scale(0.92) translateY(12px); }
     to   { opacity:1; transform: scale(1) translateY(0); }
@@ -307,17 +337,18 @@ export const Profile = () => {
           <SettingsGroup rows={ACCOUNT_ROWS} />
         </section>
 
-        {/* Legal */}
-        <section className="pf-section pf-anim pf-anim-3">
-          <p className="pf-section-label">Legal</p>
-          <SettingsGroup rows={LEGAL_ROWS} />
-        </section>
+        {/* Right column: Legal + Support (stacked) */}
+        <div className="pf-right-col pf-anim pf-anim-3">
+          <section className="pf-section">
+            <p className="pf-section-label">Legal</p>
+            <SettingsGroup rows={LEGAL_ROWS} />
+          </section>
 
-        {/* Support */}
-        <section className="pf-section pf-anim pf-anim-4">
-          <p className="pf-section-label">Support</p>
-          <SettingsGroup rows={SUPPORT_ROWS} />
-        </section>
+          <section className="pf-section">
+            <p className="pf-section-label">Support</p>
+            <SettingsGroup rows={SUPPORT_ROWS} />
+          </section>
+        </div>
 
         {/* Sign out */}
         <button