feat: Implement custom scrollbar, refine agent profile edit navigation, and enhance quick link scrolling on the agent edit page.

src/app/(agent)/agent/edit/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import {
@@ -108,6 +108,7 @@ const initialFormData = {
 export default function EditProfilePage() {
   const router = useRouter();
   const [formData, setFormData] = useState(initialFormData);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const handleCancel = () => {
     router.push('/agent/dashboard');
@@ -124,16 +125,14 @@ export default function EditProfilePage() {
   };
 
   return (
-    <div className="flex gap-6">
+    <div className="flex gap-6 h-[calc(100vh-180px)]">
       {/* Left Sidebar - Quick Links */}
-      <div className="w-[220px] flex-shrink-0 hidden lg:block">
-        <div className="sticky top-6">
-          <QuickLinks />
-        </div>
+      <div className="w-[220px] flex-shrink-0 hidden lg:block h-full overflow-y-auto scrollbar-thin">
+        <QuickLinks scrollContainerRef={scrollContainerRef} />
       </div>
 
-      {/* Main Content */}
-      <div className="flex-1 space-y-6">
+      {/* Main Content - Scrollable */}
+      <div ref={scrollContainerRef} className="flex-1 space-y-6 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
         {/* Basic Information */}
         <div className="bg-white rounded-[20px] p-6">
           <FormSection id="basic-info" icon="/assets/icons/user-icon.svg" title="Basic Information">