From 00e74b645c2edef764f2daa9a864229ceef02303 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 10 Nov 2025 16:00:28 +0530
Subject: [PATCH] Ui alignment in Recurring Expense and Payment Request page.

---
 src/components/Expenses/ExpenseSkeleton.jsx              | 2 +-
 src/components/PaymentRequest/PaymentRequestList.jsx     | 2 +-
 src/components/RecurringExpense/RecurringExpenseList.jsx | 8 +++++---
 src/pages/PaymentRequest/PaymentRequestPage.jsx          | 8 +++++---
 src/pages/RecurringExpense/RecurringExpensePage.jsx      | 7 ++++---
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Expenses/ExpenseSkeleton.jsx b/src/components/Expenses/ExpenseSkeleton.jsx
index 4356eda0..8a4afe95 100644
--- a/src/components/Expenses/ExpenseSkeleton.jsx
+++ b/src/components/Expenses/ExpenseSkeleton.jsx
@@ -154,7 +154,7 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
         <thead>
           <tr>
             <th className="d-none d-sm-table-cell">
-              <div className="text-start ms-5">Expense Categort</div>
+              <div className="text-start ms-5">Expense Category</div>
             </th>
             <th className="d-none d-sm-table-cell">
               <div className="text-start ms-5">Payment Mode</div>
diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index c8167e45..d7143939 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -239,7 +239,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
         />
       )}
       <div className="card page-min-h table-responsive px-sm-4">
-        <div className="card-datatable" id="payment-request-table">
+        <div className="card-datatable mx-2" id="payment-request-table ">
           <table className="table border-top dataTable text-nowrap align-middle">
             <thead>
               <tr>
diff --git a/src/components/RecurringExpense/RecurringExpenseList.jsx b/src/components/RecurringExpense/RecurringExpenseList.jsx
index aa039448..2d413ead 100644
--- a/src/components/RecurringExpense/RecurringExpenseList.jsx
+++ b/src/components/RecurringExpense/RecurringExpenseList.jsx
@@ -181,10 +181,11 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
         />
       )}
 
-      <div className="card page-min-h table-responsive px-sm-4 ">
+      <div className="card page-min-h table-responsive px-sm-4">
         <div className="card-datatable" id="payment-request-table">
-          {Array.isArray(filteredData) && filteredData.length > 0 && (
-            <table className="table border-top dataTable text-nowrap align-middle">
+         <div className="mx-2">
+           {Array.isArray(filteredData) && filteredData.length > 0 && (
+            <table className="table border-top dataTable text-nowrap  align-middle">
               <thead>
                 <tr>
                   {recurringExpenseColumns.map((col) => (
@@ -284,6 +285,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
                 {isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
               </div>
             )}
+         </div>
         </div>
 
         {/* Pagination */}
diff --git a/src/pages/PaymentRequest/PaymentRequestPage.jsx b/src/pages/PaymentRequest/PaymentRequestPage.jsx
index 541a366e..db174309 100644
--- a/src/pages/PaymentRequest/PaymentRequestPage.jsx
+++ b/src/pages/PaymentRequest/PaymentRequestPage.jsx
@@ -73,7 +73,7 @@ const PaymentRequestPage = () => {
 
         {/* Top Bar */}
         <div className="card my-3 px-sm-4 px-0">
-          <div className="card-body py-2 px-0">
+          <div className="card-body py-2 px-0 mx-2">
             <div className="row align-items-center">
               <div className="col-6">
                 <input
@@ -81,11 +81,12 @@ const PaymentRequestPage = () => {
                   className="form-control form-control-sm w-auto"
                   placeholder="Search Payment Request"
                   value={search}
+                  style={{minWidth:"200px"}}
                   onChange={(e) => setSearch(e.target.value)}
                 />
               </div>
 
-              <div className="col-6 text-end mt-2 mt-sm-0">
+              <div className="col-6 text-end mt-sm-0">
                 <button
                   className="btn btn-sm btn-primary"
                   type="button"
@@ -145,7 +146,8 @@ const PaymentRequestPage = () => {
             size="md"
             closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
           >
-            <MakeExpense   onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
+            <MakeExpe
+            nse   onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
           </GlobalModel>
         )}
 
diff --git a/src/pages/RecurringExpense/RecurringExpensePage.jsx b/src/pages/RecurringExpense/RecurringExpensePage.jsx
index f7b36dd6..12c07e10 100644
--- a/src/pages/RecurringExpense/RecurringExpensePage.jsx
+++ b/src/pages/RecurringExpense/RecurringExpensePage.jsx
@@ -57,16 +57,17 @@ const RecurringExpensePage = () => {
 
         {/* Top Bar */}
         <div className="card my-3 px-sm-4 px-0">
-          <div className="card-body py-2 px-1">
+          <div className="card-body py-2 px-1 mx-2">
             <div className="row align-items-center mb-0">
               {/* Left Column: Search + Filter */}
               <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
                 <div className="d-flex align-items-center flex-wrap gap-0">
                   <input
                     type="search"
-                    className="form-control form-control-sm w-25"
+                    className="form-control form-control-sm w-auto"
                     placeholder="Search Recurring Expense"
                     value={search}
+                    style={{minWidth:"200px"}}
                     onChange={(e) => setSearch(e.target.value)}
                   />
 
@@ -99,7 +100,7 @@ const RecurringExpensePage = () => {
               </div>
 
               {/* Right Column: Add Button */}
-              <div className="col-md-4 col-sm-12 text-md-end text-start">
+              <div className="col-md-4 col-sm-12 text-md-end text-end">
                 <button
                   className="btn btn-sm btn-primary"
                   type="button"