fix (client): use absolute property in @media() scss (workaround #10992)

This commit is contained in:
naskya 2024-08-18 14:46:22 +09:00
parent 8209a9dc34
commit 57f4e95279
No known key found for this signature in database
GPG key ID: 712D413B3A9FED5C
2 changed files with 12 additions and 6 deletions

View file

@ -184,7 +184,8 @@ onBeforeUnmount(() => {
inset-inline-start: 0;
inset-block-start: 0;
}
@media (max-inline-size: 850px) {
// TODO: use logical property (max-inline-size doesn't work)
@media (max-width: 850px) {
.container {
flex-direction: column;
}

View file

@ -239,7 +239,8 @@ function showMenu(ev) {
rgba(0, 0, 0, 0) 100%
);
@media (max-inline-size: 1200px) {
// TODO: use logical property (max-inline-size doesn't work)
@media (max-width: 1200px) {
display: none;
}
}
@ -270,7 +271,8 @@ function showMenu(ev) {
inset-inline-start: 42px;
inline-size: 140px;
@media (max-inline-size: 450px) {
// TODO: use logical property (max-inline-size doesn't work)
@media (max-width: 450px) {
inline-size: 130px;
}
}
@ -285,7 +287,8 @@ function showMenu(ev) {
margin-inline-end: 8px;
}
@media (max-inline-size: 1200px) {
// TODO: use logical property (max-inline-size doesn't work)
@media (max-width: 1200px) {
display: none;
}
}
@ -301,7 +304,8 @@ function showMenu(ev) {
border-radius: var(--radius);
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
@media (max-inline-size: 1200px) {
// TODO: use logical property (max-inline-size doesn't work)
@media (max-width: 1200px) {
margin: auto;
}
@ -374,7 +378,8 @@ function showMenu(ev) {
padding-block: 8px;
padding-inline: 0;
@media (max-inline-size: 900px) {
// TODO: use logical property (max-inline-size doesn't work)
@media (max-width: 900px) {
display: none;
}
}