Changes in Filter drower increase its size.

src/pages/Gallary/ImageGallary.jsx

@@ -301,6 +301,10 @@ const ImageGallery = () => {
                 Clear
               </button>
             )}
+            {/* Add the collapse/expand icon */}
+            <span className="collapse-icon">
+                {collapsedFilters[type] ? '+' : '-'}
+            </span>
         </div>
       </div>
       {!collapsedFilters[type] && (
@@ -462,23 +466,16 @@ const ImageGallery = () => {
           )}
         </button>
         <div className={`filter-panel ${isFilterPanelOpen ? "open" : ""}`} ref={filterPanelRef}>
-           <div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
+            <div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
             <div className="dropdown-header" onClick={() => toggleCollapse('dateRange')}>
               <strong>Date Range</strong>
-              {(selectedFilters.startDate || selectedFilters.endDate) && (
+              
-                <button
+                <span className="collapse-icon">
-                  className="clear-button"
+                    {collapsedFilters.dateRange ? '+' : '-'}
-                  onClick={(e) => {
+                </span>
-                    e.stopPropagation();
-                    setSelectedFilters(prev => ({ ...prev, startDate: "", endDate: "" }));
-                  }}
-                >
-                  Clear
-                </button>
-              )}
             </div>
             {!collapsedFilters.dateRange && (
-              <div >
+              <div className="datepicker" >
                 <DateRangePicker
                   onRangeChange={setDateRange}
                   defaultStartDate={selectedFilters.startDate || yesterday} // Use selected date or yesterday as default
@@ -497,7 +494,7 @@ const ImageGallery = () => {
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
           
           {/* DateRangePicker at the end */}
-         
+          
 
           <div className="filter-actions">
             <button className="btn btn-secondary btn-xs " onClick={handleClearAllFilters}>

src/pages/Gallary/ImageGallery.css

@@ -12,7 +12,7 @@
 }
 
 .gallery-container.filter-panel-open {
-  grid-template-columns: 1fr 250px;
+  grid-template-columns: 1fr 350px;
 }
 
 .main-content {
@@ -125,7 +125,8 @@
   opacity: 1;
   transform: translateY(0);
   overflow-y: auto;
-  padding-bottom: 0px; /* Adjusted padding-bottom */
+  padding-bottom: 0px;
+  /* Adjusted padding-bottom */
 }
 
 .dropdown {
@@ -138,8 +139,10 @@
   box-shadow: none;
   padding: 4px 10px;
   border-radius: 0 0 4px 4px;
-  max-height: 150px; /* Default max-height for scrollable dropdowns */
+  max-height: 150px;
-  overflow-y: auto; /* Default overflow for scrollable dropdowns */
+  /* Default max-height for scrollable dropdowns */
+  overflow-y: auto;
+  /* Default overflow for scrollable dropdowns */
   transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
 }
 
@@ -170,13 +173,17 @@
 
 /* --- New styles for Date Range Picker dropdown --- */
 .dropdown strong:contains("Date Range") + .header-controls + .dropdown-content {
-  max-height: none; /* Remove max-height */
+  max-height: none;
-  overflow-y: visible; /* Allow content to dictate height */
+  /* Remove max-height */
+  overflow-y: visible;
+  /* Allow content to dictate height */
 }
 
 .dropdown strong:contains("Date Range") + .header-controls + .dropdown-content::-webkit-scrollbar {
-  display: none; /* Hide scrollbar for Webkit browsers */
+  display: none;
+  /* Hide scrollbar for Webkit browsers */
 }
+
 /* --- End new styles --- */
 
 .dropdown-content label {
@@ -270,6 +277,19 @@
   gap: 8px;
 }
 
+/* New style for the collapse icon */
+.collapse-icon {
+  font-size: 16px; /* Adjust size as needed */
+  color: #6366f1;
+  margin-left: 8px; /* Space between clear button and icon */
+  transition: transform 0.2s ease;
+}
+
+.dropdown.collapsed .collapse-icon {
+  transform: rotate(0deg); /* No rotation for collapsed */
+}
+
+/* Original toggle-icon styles (if they still exist and are needed) */
 .toggle-icon {
   font-size: 10px;
   color: #6366f1;
@@ -504,6 +524,7 @@ hr {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -512,10 +533,8 @@ hr {
 .filter-actions {
   display: flex;
   justify-content: space-between;
-  margin-top: auto; 
+  margin-top: auto;
   padding-top: 10px;
-  border-top: 1px solid #e5e7eb;
-  background-color: #fff;
   position: sticky;
   bottom: 0;
   z-index: 10;
@@ -550,4 +569,9 @@ hr {
 
 .btn-secondary:hover {
   background-color: #e2e8f0;
+}
+
+.datepicker {
+  margin-right: 135px;
+  margin-top: 6px;
 }