[Fix] Adjust layout widths and add search bar styling for better resp…

…onsiveness
HyperPlay-Gaming · Dec 19, 2024 · 77bd50e · 77bd50e
1 parent cbac349
commit 77bd50e
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/src/frontend/screens/Quests/index.module.scss b/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;