diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css index 35f8fa962..a42d9e984 100644 --- a/components/TempDesignSystem/SidePeek/sidePeek.module.css +++ b/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; } }