🎨

packages/frontend/src/ui/classic.vue

@@ -11,7 +11,7 @@
 		</div>
 
 		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div class="content">
+			<div class="content" style="container-type: inline-size;">
 				<RouterView/>
 			</div>
 		</main>

packages/frontend/src/ui/deck/column.vue

@@ -392,6 +392,7 @@ function onDrop(ev) {
 		overflow-x: clip;
 		-webkit-overflow-scrolling: touch;
 		box-sizing: border-box;
+		container-type: inline-size;
 		background-color: var(--bg);
 	}
 }

packages/frontend/src/ui/universal.vue

@@ -5,7 +5,7 @@
 	<MkStickyContainer class="contents">
 		<template #header><XStatusBars :class="$style.statusbars"/></template>
 		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div :class="$style.content">
+			<div :class="$style.content" style="container-type: inline-size;">
 				<RouterView/>
 			</div>
 			<div :class="$style.spacer"></div>

packages/frontend/src/ui/visitor/a.vue

@@ -24,7 +24,7 @@
 			<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
 				<XHeader :info="pageInfo"/>
 			</header>
-			<main ref="main">
+			<main ref="main" style="container-type: inline-size;">
 				<RouterView/>
 			</main>
 			<div class="powered-by">

packages/frontend/src/ui/visitor/b.vue

@@ -11,7 +11,7 @@
 
 		<div class="contents">
 			<XHeader v-if="!root" class="header" :info="pageInfo"/>
-			<main>
+			<main style="container-type: inline-size;">
 				<RouterView/>
 			</main>
 			<div v-if="!root" class="powered-by">

packages/frontend/src/ui/zen.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-app">
+<div class="mk-app" style="container-type: inline-size;">
 	<RouterView/>
 
 	<XCommon/>