fix: search bar responsiveness mobile view (#1377)

* fix: search bar mobile view

* fix: filter popup responsiveness

* fix formatting

---------

Co-authored-by: Tapas Adhikary <[email protected]>
Co-authored-by: Priyankar Pal <[email protected]>
Co-authored-by: Sachin Chaurasiya <[email protected]>
Co-authored-by: Kaushal Joshi <[email protected]>

Author: 5 people

src/common/search/FilterPlays.jsx

@@ -228,7 +228,7 @@ const FilterPlays = ({ onChange, query }) => {
       >
         {FIELD_TEMPLATE.map((field, field_i) => {
           return (
-            <div className="flex flex-col md:flex-row p-2" key={field_i}>
+            <div className="flex-filter-modal flex-col md:flex-row p-2" key={field_i}>
               <div className="w-32">
                 {field.display}
                 {field.required ? '*' : ''}

src/common/search/SearchBox.jsx

@@ -29,7 +29,7 @@ export const SearchBox = ({ reset }) => {
   return (
     <div className="filter">
       <div
-        className="flex flex-1 search-input items-center filter-area px-4"
+        className="flex flex-1 search-input items-center filter-area pl-4 pr-2"
         data-testid="plays-search-box-container"
       >
         <BiSearch className="mr-2" data-testid="plays-search-box-icon" size="24px" />

src/common/search/search.css

@@ -8,6 +8,12 @@
   align-items: center;
 }
 
+@media screen and (max-width: 576px) {
+  .app-header-search {
+    width: 70%;
+  }
+}
+
 /* Filter*/
 .filter {
   width: 100%;
@@ -63,6 +69,9 @@
 }
 
 @media screen and (max-width: 576px) {
+  .filter {
+    padding: 0.5rem 0;
+  }
   .filter .search-input-icon {
     left: 0.6rem;
     width: 20px;
@@ -118,6 +127,7 @@
 
 @media screen and (max-width: 576px) {
   .btn-filter {
+    padding: 0 0.2rem;
   }
   .btn-filter .icon {
     width: 24px;
@@ -208,6 +218,13 @@
   font-size: var(--fs-rg);
 }
 
+.flex-filter-modal {
+  display: flex;
+  width: 500px;
+  margin: 0 auto;
+  justify-content: space-between;
+}
+
 /* CSS attributes for clear All button */
 
 .modal-clear-filter {