From 28b9fe5e18303ee82e383d6d437931275e387269 Mon Sep 17 00:00:00 2001
From: Malsha Gamage <malshagamage137@gmail.com>
Date: Mon, 16 Feb 2026 14:31:33 +0530
Subject: [PATCH 1/6] Make Users page responsive and mobile-friendly

Update the Users page layout to be responsive: switch the header container to stack vertically on small screens and align horizontally on md+ with spacing (flex-col md:flex-row md:justify-between md:items-center gap-4). Make the "Add New User" button full-width on mobile (w-full md:w-auto). Also apply minor whitespace/formatting cleanups inside the add-user dialog markup.
---
 frontend/app/dashboard/users/page.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/app/dashboard/users/page.tsx b/frontend/app/dashboard/users/page.tsx
index c877ae5..f9dfae2 100644
--- a/frontend/app/dashboard/users/page.tsx
+++ b/frontend/app/dashboard/users/page.tsx
@@ -190,7 +190,7 @@ export default function UsersPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
           <div>
             <h1 className="text-3xl font-bold text-gray-900">User Management</h1>
             <p className="text-gray-600 mt-1">Manage all system users and their permissions</p>
@@ -200,27 +200,27 @@ export default function UsersPage() {
             onOpenChange={(open) => {
               setIsAddDialogOpen(open)
               if (open) {
-                resetForm()
+          resetForm()
               }
             }}
           >
             <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <UserPlus className="w-4 h-4 mr-2" />
-                Add New User
+              <Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
+          <UserPlus className="w-4 h-4 mr-2" />
+          Add New User
               </Button>
             </DialogTrigger>
             <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
               <DialogHeader>
-                <DialogTitle>Add New User</DialogTitle>
-                <DialogDescription>Enter user details to add to the system</DialogDescription>
+          <DialogTitle>Add New User</DialogTitle>
+          <DialogDescription>Enter user details to add to the system</DialogDescription>
               </DialogHeader>
               <UserForm formData={formData} setFormData={setFormData} roleOptions={roleOptions} />
               <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddUser} className="bg-blue-600">
-                  Add User
-                </Button>
+          <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+          <Button onClick={handleAddUser} className="bg-blue-600">
+            Add User
+          </Button>
               </DialogFooter>
             </DialogContent>
           </Dialog>

From b15bb055a7efdf66db3aaa919f1bdc47a270d4fa Mon Sep 17 00:00:00 2001
From: Malsha Gamage <malshagamage137@gmail.com>
Date: Mon, 16 Feb 2026 15:14:13 +0530
Subject: [PATCH 2/6] Improve responsiveness of users & activity pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update layout and sizing in dashboard users and user-activity pages for better mobile support. Header sections now stack on small screens (flex-col → md:flex-row), titles use responsive font sizes, action buttons are repositioned with responsive spacing, and search inputs switch to full width on small devices (w-full → md:w-64). These changes improve alignment and readability on narrow viewports without altering functionality.
---
 frontend/app/dashboard/user-activity/page.tsx | 22 +++++++++----------
 frontend/app/dashboard/users/page.tsx         | 22 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/app/dashboard/user-activity/page.tsx b/frontend/app/dashboard/user-activity/page.tsx
index 0de63dd..cd5be31 100644
--- a/frontend/app/dashboard/user-activity/page.tsx
+++ b/frontend/app/dashboard/user-activity/page.tsx
@@ -122,12 +122,12 @@ export default function UserActivityPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">User Activity Logs</h1>
+        <div className="flex flex-col md:flex-row justify-between items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">User Activity Logs</h1>
             <p className="text-gray-600 mt-1">Monitor user actions and system activities (live from users table)</p>
           </div>
-          <div className="flex gap-2">
+            <div className="flex flex-row gap-2 mt-4 md:mt-0">
             <Button variant="outline" onClick={() => setLive(!live)}>
               {live ? 'Live: ON' : 'Live: OFF'}
             </Button>
@@ -139,7 +139,7 @@ export default function UserActivityPage() {
               <Download className="w-4 h-4 mr-2" />
               Export Logs
             </Button>
-          </div>
+            </div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
@@ -183,14 +183,14 @@ export default function UserActivityPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
+            <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
               <div>
-                <CardTitle>Recent Activities</CardTitle>
-                <CardDescription>Real-time user activity monitoring</CardDescription>
+              <CardTitle>Recent Activities</CardTitle>
+              <CardDescription>Real-time user activity monitoring</CardDescription>
               </div>
-              <div className="relative w-64">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input placeholder="Search logs..." className="pl-10" />
+              <div className="relative w-full md:w-64">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input placeholder="Search logs..." className="pl-10" />
               </div>
             </div>
           </CardHeader>
diff --git a/frontend/app/dashboard/users/page.tsx b/frontend/app/dashboard/users/page.tsx
index f9dfae2..fad7656 100644
--- a/frontend/app/dashboard/users/page.tsx
+++ b/frontend/app/dashboard/users/page.tsx
@@ -249,19 +249,19 @@ export default function UsersPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
+            <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
               <div>
-                <CardTitle>All Users</CardTitle>
-                <CardDescription>Total {stats.total} users in the system</CardDescription>
+              <CardTitle>All Users</CardTitle>
+              <CardDescription>Total {stats.total} users in the system</CardDescription>
               </div>
-              <div className="relative w-64">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input 
-                  placeholder="Search users..." 
-                  className="pl-10"
-                  value={searchTerm}
-                  onChange={(e) => handleSearch(e.target.value)}
-                />
+              <div className="relative w-full md:w-64">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input 
+                placeholder="Search users..." 
+                className="pl-10"
+                value={searchTerm}
+                onChange={(e) => handleSearch(e.target.value)}
+              />
               </div>
             </div>
           </CardHeader>

From 7e33386021be11476442cc91e1d1ed466e9809c7 Mon Sep 17 00:00:00 2001
From: Malsha Gamage <malshagamage137@gmail.com>
Date: Mon, 16 Feb 2026 15:30:45 +0530
Subject: [PATCH 3/6] Refactor hospital page layout and dialog markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rework the Hospitals page header and dialog markup to improve responsiveness and alignment. The header now uses a column-to-row flex layout with adjusted heading sizes and left-aligned text; the Add Hospital dialog and trigger were moved into their own container to preserve layout and spacing on small screens. Also updated the All Hospitals card header to be responsive (search input becomes full-width on small screens) and tweaked spacing classes. No functional changes to form behavior were made — this is purely layout/CSS structure cleanup.
---
 frontend/app/dashboard/hospitals/page.tsx | 66 ++++++++++++-----------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/frontend/app/dashboard/hospitals/page.tsx b/frontend/app/dashboard/hospitals/page.tsx
index 27a8acb..b9bbfbc 100644
--- a/frontend/app/dashboard/hospitals/page.tsx
+++ b/frontend/app/dashboard/hospitals/page.tsx
@@ -176,38 +176,40 @@ export default function HospitalsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">Hospital Management</h1>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Hospital Management</h1>
             <p className="text-gray-600 mt-1">Manage hospitals, facilities, and assignments</p>
           </div>
-          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-            <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <Plus className="w-4 h-4 mr-2" />
-                Add New Hospital
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>Add New Hospital</DialogTitle>
-                <DialogDescription>Enter hospital details to add to the system</DialogDescription>
-              </DialogHeader>
-              <HospitalForm
-                formData={formData}
-                setFormData={setFormData}
-                facilitiesText={facilitiesText}
-                onFacilitiesChange={handleFacilitiesChange}
-              />
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddHospital} className="bg-blue-600">
-                  Add Hospital
+          <div className="mt-4 md:mt-0 text-left">
+            <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
+              <DialogTrigger asChild>
+                <Button className="bg-blue-600 hover:bg-blue-700">
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add New Hospital
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-        </Dialog>
-      </div>
+              </DialogTrigger>
+              <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Add New Hospital</DialogTitle>
+                  <DialogDescription>Enter hospital details to add to the system</DialogDescription>
+                </DialogHeader>
+                <HospitalForm
+                  formData={formData}
+                  setFormData={setFormData}
+                  facilitiesText={facilitiesText}
+                  onFacilitiesChange={handleFacilitiesChange}
+                />
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+                  <Button onClick={handleAddHospital} className="bg-blue-600">
+                    Add Hospital
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Card>
@@ -233,12 +235,12 @@ export default function HospitalsPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
-              <div>
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+              <div className="text-left">
                 <CardTitle>All Hospitals</CardTitle>
                 <CardDescription>Registered medical facilities on the platform</CardDescription>
               </div>
-              <div className="relative w-64">
+              <div className="relative w-full md:w-64 mt-4 md:mt-0 text-left">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input 
                   placeholder="Search hospitals..." 

From 821902001fa985477ff8d7ae53ce7d374b7148ad Mon Sep 17 00:00:00 2001
From: Malsha Gamage <malshagamage137@gmail.com>
Date: Mon, 16 Feb 2026 15:40:00 +0530
Subject: [PATCH 4/6] Make Doctors page header responsive

Adjust layout and spacing in DoctorsPage for better responsiveness: convert header and card header to column layout on small screens and row on md+, reduce title size on small screens, and left-align text. Move the Add New Doctor Dialog into its own stacked container to sit below the title on mobile (preserving open/reset logic), and make the search input container full-width on small screens with fixed width on md+. No behavior changes to dialog actions or form handling.
---
 frontend/app/dashboard/doctors/page.tsx | 70 +++++++++++++------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/frontend/app/dashboard/doctors/page.tsx b/frontend/app/dashboard/doctors/page.tsx
index f22b266..fd2ea85 100644
--- a/frontend/app/dashboard/doctors/page.tsx
+++ b/frontend/app/dashboard/doctors/page.tsx
@@ -204,40 +204,42 @@ export default function DoctorsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">Doctor Management</h1>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Doctor Management</h1>
             <p className="text-gray-600 mt-1">Manage doctor profiles and schedules</p>
           </div>
-          <Dialog
-            open={isAddDialogOpen}
-            onOpenChange={(open) => {
-              setIsAddDialogOpen(open)
-              if (open) {
-                resetForm()
-              }
-            }}
-          >
-            <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <UserPlus className="w-4 h-4 mr-2" />
-                Add New Doctor
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>Add New Doctor</DialogTitle>
-                <DialogDescription>Enter doctor details to add to the system</DialogDescription>
-              </DialogHeader>
-              <DoctorForm formData={formData} setFormData={setFormData} />
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddDoctor} className="bg-blue-600">
-                  Add Doctor
+          <div className="mt-4 md:mt-0 text-left">
+            <Dialog
+              open={isAddDialogOpen}
+              onOpenChange={(open) => {
+                setIsAddDialogOpen(open)
+                if (open) {
+                  resetForm()
+                }
+              }}
+            >
+              <DialogTrigger asChild>
+                <Button className="bg-blue-600 hover:bg-blue-700">
+                  <UserPlus className="w-4 h-4 mr-2" />
+                  Add New Doctor
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+              </DialogTrigger>
+              <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Add New Doctor</DialogTitle>
+                  <DialogDescription>Enter doctor details to add to the system</DialogDescription>
+                </DialogHeader>
+                <DoctorForm formData={formData} setFormData={setFormData} />
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+                  <Button onClick={handleAddDoctor} className="bg-blue-600">
+                    Add Doctor
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -263,12 +265,12 @@ export default function DoctorsPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
-              <div>
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+              <div className="text-left">
                 <CardTitle>All Doctors</CardTitle>
                 <CardDescription>Registered medical practitioners on the platform</CardDescription>
               </div>
-              <div className="relative w-64">
+              <div className="relative w-full md:w-64 mt-4 md:mt-0 text-left">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input 
                   placeholder="Search doctors..." 

From 01f09b467d5a06e7dd8f4926255ec3e8b9a3e391 Mon Sep 17 00:00:00 2001
From: Malsha Gamage <malshagamage137@gmail.com>
Date: Mon, 16 Feb 2026 15:52:24 +0530
Subject: [PATCH 5/6] Make doctor-hospitals header responsive

Adjust header layout to be column on small screens and row on md+ screens by replacing static flex classes with `flex flex-col gap-4 md:flex-row md:justify-between md:items-center`. Also constrain the Assign Doctor button width with `w-fit` so it doesn't stretch full-width on small viewports. Minor markup/indentation cleanup.
---
 frontend/app/dashboard/doctor-hospitals/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/dashboard/doctor-hospitals/page.tsx b/frontend/app/dashboard/doctor-hospitals/page.tsx
index dd1e6c2..6549bf7 100644
--- a/frontend/app/dashboard/doctor-hospitals/page.tsx
+++ b/frontend/app/dashboard/doctor-hospitals/page.tsx
@@ -68,15 +68,15 @@ export default function DoctorHospitalsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col gap-4 md:flex-row md:justify-between md:items-center">
           <div>
             <h1 className="text-3xl font-bold text-gray-900">Hospital Assignments</h1>
             <p className="text-gray-600 mt-1">Manage doctor-hospital relationships and sessions</p>
           </div>
-          <Button className="bg-blue-600 hover:bg-blue-700">
+            <Button className="bg-blue-600 hover:bg-blue-700 w-fit">
             <Link2 className="w-4 h-4 mr-2" />
             Assign Doctor
-          </Button>
+            </Button>
         </div>
 
         {error && (

From dd1533b29ac75cd4be433d8fd736b3a1c571eb9d Mon Sep 17 00:00:00 2001
From: Malsha Gamage <malshagamage137@gmail.com>
Date: Mon, 16 Feb 2026 16:08:57 +0530
Subject: [PATCH 6/6] Improve dashboard responsive headers

Adjust layout and spacing for Agents and Commissions pages to improve responsiveness on small screens. Agents page: stack header elements on mobile, reduce title size on small screens, left-align text, move the Add New Agent dialog trigger into its own container with proper top margin, and make card header/search input responsive (full width on small, fixed on md).

Commissions page: switch header to a column on small screens with sm:flex-row for larger, add gap spacing and constrain the Adjust Rates button to its content (w-fit). These are UI/layout-only changes; no business logic was modified.
---
 frontend/app/dashboard/agents/page.tsx      | 66 +++++++++++----------
 frontend/app/dashboard/commissions/page.tsx |  6 +-
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/frontend/app/dashboard/agents/page.tsx b/frontend/app/dashboard/agents/page.tsx
index 78d3088..f83486c 100644
--- a/frontend/app/dashboard/agents/page.tsx
+++ b/frontend/app/dashboard/agents/page.tsx
@@ -175,38 +175,40 @@ export default function AgentsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">Agent Management</h1>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Agent Management</h1>
             <p className="text-gray-600 mt-1">Manage all agents and partnerships</p>
           </div>
-          <Dialog
-            open={isAddDialogOpen}
-            onOpenChange={(open) => {
-              setIsAddDialogOpen(open)
-              if (open) resetForm()
-            }}
-          >
-            <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <UserPlus className="w-4 h-4 mr-2" />
-                Add New Agent
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>Add New Agent</DialogTitle>
-                <DialogDescription>Enter agent details</DialogDescription>
-              </DialogHeader>
-              <AgentForm formData={formData} setFormData={setFormData} />
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddAgent} className="bg-blue-600">
-                  Add Agent
+          <div className="mt-4 md:mt-0 text-left">
+            <Dialog
+              open={isAddDialogOpen}
+              onOpenChange={(open) => {
+                setIsAddDialogOpen(open)
+                if (open) resetForm()
+              }}
+            >
+              <DialogTrigger asChild>
+                <Button className="bg-blue-600 hover:bg-blue-700">
+                  <UserPlus className="w-4 h-4 mr-2" />
+                  Add New Agent
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+              </DialogTrigger>
+              <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Add New Agent</DialogTitle>
+                  <DialogDescription>Enter agent details</DialogDescription>
+                </DialogHeader>
+                <AgentForm formData={formData} setFormData={setFormData} />
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+                  <Button onClick={handleAddAgent} className="bg-blue-600">
+                    Add Agent
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
@@ -254,12 +256,12 @@ export default function AgentsPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
-              <div>
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+              <div className="text-left">
                 <CardTitle>All Agents</CardTitle>
                 <CardDescription>Active agents and booking statistics</CardDescription>
               </div>
-              <div className="relative w-64">
+              <div className="relative w-full md:w-64 mt-4 md:mt-0 text-left">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input 
                   placeholder="Search agents..." 
diff --git a/frontend/app/dashboard/commissions/page.tsx b/frontend/app/dashboard/commissions/page.tsx
index f87dbc9..7ac8a37 100644
--- a/frontend/app/dashboard/commissions/page.tsx
+++ b/frontend/app/dashboard/commissions/page.tsx
@@ -19,15 +19,15 @@ export default function CommissionsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
           <div>
             <h1 className="text-3xl font-bold text-gray-900">Commission Settings</h1>
             <p className="text-gray-600 mt-1">Manage agent commission rates and payouts</p>
           </div>
-          <Button className="bg-blue-600 hover:bg-blue-700">
+            <Button className="bg-blue-600 hover:bg-blue-700 w-fit">
             <DollarSign className="w-4 h-4 mr-2" />
             Adjust Rates
-          </Button>
+            </Button>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">