From 6475a61dc85d4ce14ecd91e138216598e7bbf85d Mon Sep 17 00:00:00 2001
From: janvi01 <janvibajo1@gmail.com>
Date: Thu, 2 Nov 2023 13:39:30 +0530
Subject: [PATCH 1/3] fix: search bar mobile view

---
 src/common/search/SearchBox.jsx |  2 +-
 src/common/search/search.css    | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/common/search/SearchBox.jsx b/src/common/search/SearchBox.jsx
index 3550715d8f..5c338754b2 100644
--- 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
index d01d2bee29..5456d5afea 100644
--- 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;

From 61008a8da241781ef6b6fa4bb371b98a08cdcfc7 Mon Sep 17 00:00:00 2001
From: janvi01 <janvibajo1@gmail.com>
Date: Mon, 18 Dec 2023 22:14:59 +0530
Subject: [PATCH 2/3] fix: filter popup responsiveness

---
 src/common/search/FilterPlays.jsx            |  2 +-
 src/common/search/search.css                 |  7 +++++++
 src/plays/hangman-game/styled-components.tsx | 15 ++-------------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 973bde6d98..0830b732fa 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -220,7 +220,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/search.css b/src/common/search/search.css
index 5456d5afea..6b7154c9cf 100644
--- a/src/common/search/search.css
+++ b/src/common/search/search.css
@@ -218,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 {
diff --git a/src/plays/hangman-game/styled-components.tsx b/src/plays/hangman-game/styled-components.tsx
index 69243eeeb0..dd0f1e6d6a 100644
--- a/src/plays/hangman-game/styled-components.tsx
+++ b/src/plays/hangman-game/styled-components.tsx
@@ -17,19 +17,8 @@ export const Container = styled.div`
   gap: 2rem;
   min-height: 100vh;
   max-width: 800px;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   position: relative;
   padding-bottom: 10px;
   @media (min-width: 768px) {

From 3ebd57a3277abbf3894d1c442c2a1a44ea96477d Mon Sep 17 00:00:00 2001
From: janvi01 <janvibajo1@gmail.com>
Date: Mon, 15 Jan 2024 14:08:41 +0530
Subject: [PATCH 3/3] fix formatting

---
 src/plays/hangman-game/styled-components.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/plays/hangman-game/styled-components.tsx b/src/plays/hangman-game/styled-components.tsx
index dd0f1e6d6a..69243eeeb0 100644
--- a/src/plays/hangman-game/styled-components.tsx
+++ b/src/plays/hangman-game/styled-components.tsx
@@ -17,8 +17,19 @@ export const Container = styled.div`
   gap: 2rem;
   min-height: 100vh;
   max-width: 800px;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   position: relative;
   padding-bottom: 10px;
   @media (min-width: 768px) {