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]>
reactplay · Feb 12, 2024 · e847615 · e847615
1 parent fe95c29
commit e847615
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/common/search/FilterPlays.jsx b/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 ? '*' : ''}

diff --git a/src/common/search/SearchBox.jsx b/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" />

diff --git a/src/common/search/search.css b/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 {