fix: mobile first styling

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -1,20 +1,21 @@
 .sidePeek {
   position: fixed;
-  top: 0;
+  top: 70.047px;
+  right: auto;
   bottom: 0;
-  right: 0px;
-  width: 600px;
+  width: 100%;
+  height: calc(100vh - 70.047px);
   background-color: var(--Base-Background-Primary-Normal);
   z-index: 100;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
 }
 
 .sidePeek[data-entering] {
-  animation: slide-in 250ms;
+  animation: slide-up 300ms;
 }
 
 .sidePeek[data-exiting] {
-  animation: slide-in 250ms reverse;
+  animation: slide-up 300ms reverse;
 }
 
 .header {
@@ -76,19 +77,18 @@
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1367px) {
   .sidePeek {
-    right: auto;
-    top: 70.047px;
-    width: 100%;
-    height: calc(100vh - 70.047px);
+    top: 0;
+    right: 0px;
+    width: 600px;
+    height: 100vh;
   }
-
   .sidePeek[data-entering] {
-    animation: slide-up 300ms;
+    animation: slide-in 250ms;
   }
 
   .sidePeek[data-exiting] {
-    animation: slide-up 300ms reverse;
+    animation: slide-in 250ms reverse;
   }
 }