[UI]fix search bar sizing on Quest page (#1200)

* [Fix] Updated SearchBar styling and placeholder by resizing containers on QuestPage

* [Fix] Adjust layout widths and add search bar styling for better responsiveness

* [Fix] Update translation function for localization to strings

* [Fix] Add 'search' translation to localization strings

public/locales/en/translation.json

@@ -829,6 +829,7 @@
             }
         },
         "quests": "Quests",
+        "search": "Search",
         "viewAllQuests": {
             "title": "View All Quests"
         }

src/frontend/screens/Quests/index.module.scss

@@ -34,20 +34,34 @@
 }
 
 .detailsWrapper {
-  width: 800px;
+  width: 650px;
   max-width: unset !important;
 
   background-color: var(--color-neutral-800);
   border: none;
 
-  @media (max-width: 1300px) {
-    width: 540px;
+  //Steam Deck
+  @media (max-width: 1280px) {
+    width: 600px;
+  }
+
+  @media (max-width: 1024px) {
+    width: 390px;
   }
 }
 
 .tableContainer {
   background-color: var(--color-neutral-800);
   overflow-y: hidden;
+
+  //Steam DecK
+  @media (max-width: 1280px) {
+    width: 510px;
+  }
+
+  @media (max-width: 1024px) {
+    width: 480px;
+  }
 }
 
 .questSelectedLayout {
@@ -56,10 +70,18 @@
   }
 }
 
+.searchBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: var(--space-2xs);
+  font-size: var(--text-3xs);
+  padding-right: var(--space-2xs);
+}
+
 .loadingContainer {
   padding: var(--space-2lg);
   height: 100%;
-
   display: flex;
   justify-content: center;
   align-items: center;

src/frontend/screens/Quests/index.tsx

@@ -223,8 +223,8 @@ export function QuestsPage() {
             <SearchBar
               searchText={searchText}
               setSearchText={setSearchText}
-              i18n={{ placeholder: 'Search Quest' }}
-              styles={{ container: { margin: '0px 0px 0px auto' } }}
+              i18n={{ placeholder: t('quests.search', 'Search') }}
+              classNames={{ container: styles.searchBar }}
               suggestions={suggestedSearchTitles}
             />
           }