diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue index 791f694fa0..f1facc3964 100644 --- a/packages/client/src/components/MkMediaCaption.vue +++ b/packages/client/src/components/MkMediaCaption.vue @@ -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; } diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue index a94f05af3f..aae9d006d0 100644 --- a/packages/client/src/pages/welcome.entrance.a.vue +++ b/packages/client/src/pages/welcome.entrance.a.vue @@ -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; } }