From 14f58255ee6a98837df680f50293e3ef1a26d2dc Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 28 Dec 2025 20:50:11 +0900
Subject: enhance(frontend): ウィジェットの設定画面を改良 (#17033)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): ウィジェットの設定画面を改良

* Update Changelog

* fix lint
---
 .../src/components/MkPreviewWithControls.vue       | 93 ++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 packages/frontend/src/components/MkPreviewWithControls.vue

(limited to 'packages/frontend/src/components/MkPreviewWithControls.vue')

diff --git a/packages/frontend/src/components/MkPreviewWithControls.vue b/packages/frontend/src/components/MkPreviewWithControls.vue
new file mode 100644
index 0000000000..85cfa2d7e9
--- /dev/null
+++ b/packages/frontend/src/components/MkPreviewWithControls.vue
@@ -0,0 +1,93 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<div :class="$style.container">
+		<div :class="[$style.preview, prefer.s.animation ? $style.animatedBg : null]">
+			<div :class="$style.previewContent">
+				<slot name="preview"></slot>
+			</div>
+			<div v-if="previewLoading" :class="$style.previewLoading">
+				<MkLoading :class="$style.previewLoadingSpinner"/>
+			</div>
+		</div>
+		<div :class="$style.controls">
+			<slot name="controls"></slot>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { prefer } from '@/preferences.js';
+
+const props = withDefaults(defineProps<{
+	previewLoading?: boolean;
+}>(), {
+	previewLoading: false,
+});
+
+defineSlots<{
+	preview: () => any;
+	controls: () => any;
+}>();
+</script>
+
+<style lang="scss" module>
+.root {
+	container-type: inline-size;
+	height: 100%;
+}
+
+.container {
+	height: 100%;
+	display: grid;
+	grid-template-columns: 1fr 400px;
+}
+
+.preview {
+	position: relative;
+	background-color: var(--MI_THEME-bg);
+	background-image: linear-gradient(135deg, transparent 30%, var(--MI_THEME-panel) 30%, var(--MI_THEME-panel) 50%, transparent 50%, transparent 80%, var(--MI_THEME-panel) 80%, var(--MI_THEME-panel) 100%);
+	background-size: 20px 20px;
+}
+
+.previewContent {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: clip;
+}
+
+.previewLoading {
+	position: absolute;
+	inset: 0;
+	background-color: color(from var(--MI_THEME-panel) srgb r g b / 0.7);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.animatedBg {
+	animation: bg 1.2s linear infinite;
+}
+
+@keyframes bg {
+	0% { background-position: 0 0; }
+	100% { background-position: -20px -20px; }
+}
+
+.controls {
+	overflow-y: scroll;
+}
+
+@container (max-width: 800px) {
+	.container {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr 1fr;
+	}
+}
+</style>
-- 
cgit v1.2.3-freya


From ff7d2c108354113d7bc90f88534c666947914fa9 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 31 Dec 2025 13:42:59 +0900
Subject: refactor(frontend): remove undefined css rules (#17051)

---
 packages/frontend/src/components/MkDrive.vue                 | 3 ---
 packages/frontend/src/components/MkFileListForAdmin.vue      | 8 +++++++-
 packages/frontend/src/components/MkMenu.vue                  | 2 +-
 packages/frontend/src/components/MkNoteDraftsDialog.vue      | 4 ----
 packages/frontend/src/components/MkPostForm.vue              | 5 +----
 packages/frontend/src/components/MkPreviewWithControls.vue   | 2 +-
 packages/frontend/src/components/MkServerSetupWizard.vue     | 7 +------
 packages/frontend/src/components/MkTagItem.vue               | 2 +-
 packages/frontend/src/components/global/MkPageHeader.vue     | 6 +++---
 packages/frontend/src/components/global/MkResult.vue         | 2 +-
 packages/frontend/src/components/global/PageWithHeader.vue   | 2 +-
 packages/frontend/src/pages/admin/custom-emojis-manager2.vue | 4 ++--
 packages/frontend/src/pages/admin/job-queue.vue              | 6 +-----
 packages/frontend/src/pages/chat/XMessage.vue                | 2 +-
 packages/frontend/src/pages/qr.read.vue                      | 2 +-
 packages/frontend/src/pages/search.note.vue                  | 1 -
 packages/frontend/src/pages/user/index.files.vue             | 2 +-
 packages/frontend/src/pages/user/notes.vue                   | 2 +-
 packages/frontend/src/ui/_common_/navbar-h.vue               | 2 +-
 packages/frontend/src/ui/_common_/navbar.vue                 | 4 ++--
 packages/frontend/src/ui/deck.vue                            | 2 +-
 packages/frontend/src/ui/zen.vue                             | 5 +----
 22 files changed, 29 insertions(+), 46 deletions(-)

(limited to 'packages/frontend/src/components/MkPreviewWithControls.vue')

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index b67a382748..314a776c54 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -69,7 +69,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-for="(f, i) in foldersPaginator.items.value"
 					:key="f.id"
 					v-anim="i"
-					:class="$style.folder"
 					:folder="f"
 					:selectMode="select === 'folder'"
 					:isSelected="selectedFolders.some(x => x.id === f.id)"
@@ -102,7 +101,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					>
 						<XFile
 							v-for="file in item.items" :key="file.id"
-							:class="$style.file"
 							:file="file"
 							:folder="folder"
 							:isSelected="selectedFiles.some(x => x.id === file.id)"
@@ -125,7 +123,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<XFile
 					v-for="file in filesPaginator.items.value" :key="file.id"
-					:class="$style.file"
 					:file="file"
 					:folder="folder"
 					:isSelected="selectedFiles.some(x => x.id === file.id)"
diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
index a998c810f0..59dac46162 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.vue
+++ b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -6,7 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div>
 	<MkPagination v-slot="{ items }" :paginator="paginator">
-		<div :class="[$style.fileList, { [$style.grid]: viewMode === 'grid', [$style.list]: viewMode === 'list', '_gaps_s': viewMode === 'list' }]">
+		<div
+			:class="{
+				[$style.grid]: viewMode === 'grid',
+				[$style.list]: viewMode === 'list',
+				'_gaps_s': viewMode === 'list',
+			}"
+		>
 			<MkA
 				v-for="file in items"
 				:key="file.id"
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 6c8fac934c..6efaa655bc 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<span><MkEllipsis/></span>
 			</span>
 
-			<div v-else-if="item.type === 'component'" role="menuitem" tabindex="-1" :class="[$style.componentItem]">
+			<div v-else-if="item.type === 'component'" role="menuitem" tabindex="-1">
 				<component :is="item.component" v-bind="item.props"/>
 			</div>
 
diff --git a/packages/frontend/src/components/MkNoteDraftsDialog.vue b/packages/frontend/src/components/MkNoteDraftsDialog.vue
index 3f0a5a5247..371240ae4f 100644
--- a/packages/frontend/src/components/MkNoteDraftsDialog.vue
+++ b/packages/frontend/src/components/MkNoteDraftsDialog.vue
@@ -118,7 +118,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<div :class="$style.draftActions" class="_buttons">
 								<template v-if="draft.scheduledAt != null && draft.isActuallyScheduled">
 									<MkButton
-										:class="$style.itemButton"
 										small
 										@click="cancelSchedule(draft)"
 									>
@@ -126,7 +125,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 									</MkButton>
 									<!-- TODO
 									<MkButton
-										:class="$style.itemButton"
 										small
 										@click="reSchedule(draft)"
 									>
@@ -136,7 +134,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</template>
 								<MkButton
 									v-else
-									:class="$style.itemButton"
 									small
 									@click="restoreDraft(draft)"
 								>
@@ -147,7 +144,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 									danger
 									small
 									:iconOnly="true"
-									:class="$style.itemButton"
 									style="margin-left: auto;"
 									@click="deleteDraft(draft)"
 								>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b3bcfcc137..52684bc815 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<header :class="$style.header">
 		<div :class="$style.headerLeft">
 			<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
-			<button ref="accountMenuEl" v-click-anime v-tooltip="i18n.ts.account" :class="$style.account" class="_button" @click="openAccountMenu">
+			<button ref="accountMenuEl" v-click-anime v-tooltip="i18n.ts.account" class="_button" @click="openAccountMenu">
 				<img :class="$style.avatar" :src="(postAccount ?? $i).avatarUrl" style="border-radius: 100%;"/>
 			</button>
 		</div>
@@ -1469,9 +1469,6 @@ defineExpose({
 	padding: 8px;
 }
 
-.account {
-}
-
 .avatar {
 	display: block;
 	width: 28px;
diff --git a/packages/frontend/src/components/MkPreviewWithControls.vue b/packages/frontend/src/components/MkPreviewWithControls.vue
index 85cfa2d7e9..ad5fd2a01d 100644
--- a/packages/frontend/src/components/MkPreviewWithControls.vue
+++ b/packages/frontend/src/components/MkPreviewWithControls.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<slot name="preview"></slot>
 			</div>
 			<div v-if="previewLoading" :class="$style.previewLoading">
-				<MkLoading :class="$style.previewLoadingSpinner"/>
+				<MkLoading/>
 			</div>
 		</div>
 		<div :class="$style.controls">
diff --git a/packages/frontend/src/components/MkServerSetupWizard.vue b/packages/frontend/src/components/MkServerSetupWizard.vue
index 8e3b41e754..20cb48fe1c 100644
--- a/packages/frontend/src/components/MkServerSetupWizard.vue
+++ b/packages/frontend/src/components/MkServerSetupWizard.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root" class="_gaps_m">
+<div class="_gaps_m">
 	<MkInput v-model="q_name" data-cy-server-name>
 		<template #label>{{ i18n.ts.instanceName }}</template>
 	</MkInput>
@@ -370,8 +370,3 @@ function applySettings() {
 	});
 }
 </script>
-
-<style lang="scss" module>
-.root {
-}
-</style>
diff --git a/packages/frontend/src/components/MkTagItem.vue b/packages/frontend/src/components/MkTagItem.vue
index 8b7460f3a3..be735e6407 100644
--- a/packages/frontend/src/components/MkTagItem.vue
+++ b/packages/frontend/src/components/MkTagItem.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root" @click="(ev) => emit('click', ev)">
 	<span v-if="iconClass" :class="[$style.icon, iconClass]"></span>
-	<span :class="$style.content">{{ content }}</span>
+	<span>{{ content }}</span>
 	<MkButton v-if="exButtonIconClass" :class="$style.exButton" @click="(ev) => emit('exButtonClick', ev)">
 		<span :class="[$style.exButtonIcon, exButtonIconClass]"></span>
 	</MkButton>
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 2f6dfed221..2445f8e0ef 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -6,10 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-if="show" ref="el" :class="[$style.root]">
 	<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
-		<div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
+		<div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" @click="openAccountMenu">
 			<MkAvatar :class="$style.avatar" :user="$i"/>
 		</div>
-		<div v-else-if="!thin_ && narrow && !hideTitle" :class="[$style.buttons, $style.buttonsLeft]"></div>
+		<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttons"></div>
 
 		<template v-if="pageMetadata">
 			<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<XTabs v-if="!narrow || hideTitle" :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
 		</template>
-		<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="[$style.buttons, $style.buttonsRight]">
+		<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttons">
 			<template v-for="action in actions">
 				<button v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
 			</template>
diff --git a/packages/frontend/src/components/global/MkResult.vue b/packages/frontend/src/components/global/MkResult.vue
index 2071859e57..0dfb23782d 100644
--- a/packages/frontend/src/components/global/MkResult.vue
+++ b/packages/frontend/src/components/global/MkResult.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <Transition :name="prefer.s.animation ? '_transition_zoom' : ''" appear>
-	<div :class="[$style.root, { [$style.warn]: type === 'notFound', [$style.error]: type === 'error' }]" class="_gaps">
+	<div :class="$style.root" class="_gaps">
 		<img v-if="type === 'empty' && instance.infoImageUrl" :src="instance.infoImageUrl" draggable="false" :class="$style.img"/>
 		<MkSystemIcon v-else-if="type === 'empty'" type="info" :class="$style.icon"/>
 		<img v-if="type === 'notFound' && instance.notFoundImageUrl" :src="instance.notFoundImageUrl" draggable="false" :class="$style.img"/>
diff --git a/packages/frontend/src/components/global/PageWithHeader.vue b/packages/frontend/src/components/global/PageWithHeader.vue
index aac87b7669..a11b291418 100644
--- a/packages/frontend/src/components/global/PageWithHeader.vue
+++ b/packages/frontend/src/components/global/PageWithHeader.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
+<div ref="rootEl" :class="reversed ? '_pageScrollableReversed' : '_pageScrollable'">
 	<MkStickyContainer>
 		<template #header>
 			<MkPageHeader v-if="prefer.s.showPageTabBarBottom && (props.tabs?.length ?? 0) > 0" v-bind="pageHeaderPropsWithoutTabs"/>
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager2.vue b/packages/frontend/src/pages/admin/custom-emojis-manager2.vue
index 14773d7f04..c947dc3256 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager2.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager2.vue
@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader v-model:tab="headerTab" :tabs="headerTabs">
 	<XGridLocalComponent v-if="headerTab === 'local'" :class="$style.local"/>
-	<XGridRemoteComponent v-else-if="headerTab === 'remote'" :class="$style.remote"/>
-	<XRegisterComponent v-else-if="headerTab === 'register'" :class="$style.register"/>
+	<XGridRemoteComponent v-else-if="headerTab === 'remote'"/>
+	<XRegisterComponent v-else-if="headerTab === 'register'"/>
 </PageWithHeader>
 </template>
 
diff --git a/packages/frontend/src/pages/admin/job-queue.vue b/packages/frontend/src/pages/admin/job-queue.vue
index b18049cb11..97b6c2bc67 100644
--- a/packages/frontend/src/pages/admin/job-queue.vue
+++ b/packages/frontend/src/pages/admin/job-queue.vue
@@ -97,7 +97,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #header>
 					<MkTabs
 						v-model:tab="jobState"
-						:class="$style.jobsTabs" :tabs="[{
+						:tabs="[{
 							key: 'all',
 							title: 'All',
 							icon: 'ti ti-code-asterisk',
@@ -359,8 +359,4 @@ definePage(() => ({
 	font-size: 85%;
 	margin: 6px 0;
 }
-
-.jobsTabs {
-
-}
 </style>
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index 613c4e4dcc..cd984f6fb5 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:enableEmojiMenu="true"
 				:enableEmojiMenuReaction="true"
 			/>
-			<MkMediaList v-if="message.file" :mediaList="[message.file]" :class="$style.file"/>
+			<MkMediaList v-if="message.file" :mediaList="[message.file]"/>
 		</MkFukidashi>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
 		<div :class="$style.footer">
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 251dccd0f0..5e3633c052 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #header>
 			<div :class="$style.view">
 				<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
-				<div ref="overlayEl" :class="$style.overlay"></div>
+				<div ref="overlayEl"></div>
 				<div :class="$style.controls">
 					<MkButton v-tooltip="i18n.ts._qr.scanFile" iconOnly @click="upload"><i class="ti ti-photo-plus"></i></MkButton>
 
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index fb34d592a6..3af1bef278 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -71,7 +71,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<MkUserCardMini
 									:user="user"
 									:withChart="false"
-									:class="$style.userSelectedCard"
 								/>
 							</div>
 							<div>
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index 58f6b0ca45..1523e99453 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<MkButton rounded full @click="emit('showMore')">{{ i18n.ts.showMore }} <i class="ti ti-arrow-right"></i></MkButton>
 		</div>
-		<p v-if="!fetching && notes.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
+		<p v-if="!fetching && notes.length == 0">{{ i18n.ts.nothing }}</p>
 	</div>
 </MkContainer>
 </template>
diff --git a/packages/frontend/src/pages/user/notes.vue b/packages/frontend/src/pages/user/notes.vue
index 1e6dba73bd..137c6cb872 100644
--- a/packages/frontend/src/pages/user/notes.vue
+++ b/packages/frontend/src/pages/user/notes.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_spacer" style="--MI_SPACER-w: 800px;">
-	<div :class="$style.root">
+	<div>
 		<MkStickyContainer>
 			<template #header>
 				<MkTab
diff --git a/packages/frontend/src/ui/_common_/navbar-h.vue b/packages/frontend/src/ui/_common_/navbar-h.vue
index 64da4647b6..ad0632965b 100644
--- a/packages/frontend/src/ui/_common_/navbar-h.vue
+++ b/packages/frontend/src/ui/_common_/navbar-h.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="[$style.root, acrylic ? $style.acrylic : null]">
 	<div :class="$style.body">
-		<div :class="$style.left">
+		<div>
 			<button v-click-anime :class="[$style.item, $style.instance]" class="_button" @click="openInstanceMenu">
 				<img :class="$style.instanceIcon" :src="instance.iconUrl ?? '/favicon.ico'" draggable="false"/>
 			</button>
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index c679ee7a92..ee76412476 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -79,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	-->
 
 	<div v-if="!forceIconOnly && prefer.r.showNavbarSubButtons.value" :class="$style.subButtons">
-		<div :class="[$style.subButton, $style.menuEditButton]">
+		<div :class="$style.subButton">
 			<svg viewBox="0 0 16 64" :class="$style.subButtonShape">
 				<g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
 					<path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
@@ -90,7 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template v-if="!props.asDrawer">
 			<div :class="$style.subButtonGapFill"></div>
 			<div :class="$style.subButtonGapFillDivider"></div>
-			<div :class="[$style.subButton, $style.toggleButton]">
+			<div :class="$style.subButton">
 				<svg viewBox="0 0 16 64" :class="$style.subButtonShape">
 					<g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
 						<path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 484b7f277a..fabff28eb6 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							v-for="id in ids"
 							:ref="id"
 							:key="id"
-							:class="[$style.column, { '_shadow': withWallpaper }]"
+							:class="{ '_shadow': withWallpaper }"
 							:column="columns.find(c => c.id === id)!"
 							:isStacked="ids.length > 1"
 							@headerWheel="onWheel"
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 800aef8696..b56ed4eb6a 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root">
+<div>
 	<div :class="$style.contents">
 		<!--
 			デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
@@ -57,9 +57,6 @@ function goToDeck() {
 </script>
 
 <style lang="scss" module>
-.root {
-}
-
 .contents {
 	display: flex;
 	flex-direction: column;
-- 
cgit v1.2.3-freya