fixed date range picker width

src/components/Dashboard/Dashboard.jsx

@@ -39,7 +39,7 @@ const Dashboard = () => {
     </div>
 
     <div className="col-12 col-xl-4 col-md-6">
-      <div className="card ">
+      <div className="card h-100">
         <ExpenseStatus />
       </div>
     </div>

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -54,14 +54,32 @@ const ExpenseAnalysis = () => {
         },
       },
     },
-    responsive: [
+   responsive: [
-      {
+    {
-        breakpoint: 576, // mobile breakpoint
+      breakpoint: 1200,
-        options: {
+      options: {
-          chart: { width: "100%" },
+        chart: { width: "100%", height: 350 },
+        legend: { position: "bottom" },
+      },
+    },
+    {
+      breakpoint: 992,
+      options: {
+        chart: { width: "100%", height: 300 },
+        dataLabels: { style: { fontSize: "11px" } },
+      },
+    },
+    {
+      breakpoint: 576,
+      options: {
+        chart: { width: "100%", height: 250 },
+        legend: { fontSize: "10px" },
+        plotOptions: {
+          pie: { donut: { size: "65%" } },
         },
       },
-    ],
+    },
+  ],
   };
 
   return (
@@ -69,11 +87,11 @@ const ExpenseAnalysis = () => {
       {/* Header */}
       <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
         <div className="text-start w-100">
-          <h5 className="mb-1 card-title">Expense Breakdown</h5>
+          <p className="mb-1 fw-medium fs-sm-6 fs-md-4">Expense Breakdown</p>
           <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p>
         </div>
 
-        <div className="text-start text-sm-end w-75">
+        <div className="d-flex justify-content-end te w-75">
           <FormProvider {...methods}>
             <DateRangePicker1 />
           </FormProvider>
@@ -92,7 +110,7 @@ const ExpenseAnalysis = () => {
         )}
 
         {!isLoading && report.length === 0 && (
-          <div className="text-center py-5 text-muted">No data found</div>
+          <div className="d-flex justify-content-center align-items-center">No data found</div>
         )}
 
         {!isLoading && report.length > 0 && (

src/components/Dashboard/ExpenseStatus.jsx

@@ -43,7 +43,7 @@ const ExpenseStatus = () => {
 
       <div className="card-body ">
 
-        <div className="report-list text-start">
+        <div className="report-list text-start  h-max">
           {[
             {
               title: "Pending Payment",

src/components/common/DatePicker.jsx

@@ -47,7 +47,7 @@ const DatePicker = ({
   const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
 
   return (
-    <div className={`position-relative ${className}`}>
+    <div className={`position-relative ${className} w-max `}>
       <input
         type="text"
         className="form-control form-control-sm"

src/components/common/DateRangePicker.jsx

@@ -63,10 +63,10 @@ const DateRangePicker = ({
   };
 
   return (
-    <div className={`position-relative w-auto justify-content-center`}>
+    <div className={`position-relative  justify-content-center w-max `}>
       <input
         type="text"
-        className="form-control form-control-sm w-100 pe-8 "
+        className="form-control form-control-sm w-100 pe-2 fw-medium"
         placeholder="From to End"
         id="flatpickr-range"
         ref={inputRef}
@@ -179,10 +179,10 @@ export const DateRangePicker1 = ({
   const formattedValue = start && end ? `${start} To ${end}` : "";
 
   return (
-    <div className={`position-relative ${className}`}>
+    <div className={`position-relative ${className} w-max   `} >
       <input
         type="text"
-        className="form-control form-control-sm ps-2 pe-5 me-4 cursor-pointer"
+        className="form-control form-control-sm ps-2 pe-3 me-2 cursor-pointer fw-medium"
         placeholder={placeholder}
         defaultValue={formattedValue}
         ref={(el) => {