From a93b6c36bf8451790078c9d5114bef772921c46a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 26 Oct 2024 19:13:04 +0900
Subject: [PATCH 01/11] chore(vscode): Multi-root Workspaces

---
 .gitignore                              |  1 -
 .vscode/extensions.json                 |  4 +-
 .vscode/settings.json                   | 19 ++++-----
 packages/backend/.vscode/settings.json  | 25 ++++++++----
 packages/frontend/.vscode/settings.json | 21 +++++++---
 taiyme.code-workspace                   | 52 +++++++++++++++++++++++++
 6 files changed, 96 insertions(+), 26 deletions(-)
 create mode 100644 taiyme.code-workspace

diff --git a/.gitignore b/.gitignore
index a6dd42f3eda4..9b441c76a3b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -54,7 +54,6 @@ run.bat
 api-docs.json
 *.log
 /redis
-*.code-workspace
 .DS_Store
 /files
 ormconfig.json
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index df05f350b538..c9addc2d9dec 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,6 +6,6 @@
 		"Orta.vscode-jest",
 		"mrmlnc.vscode-json5",
 		"github.vscode-github-actions",
-		"redhat.vscode-yaml"
-	]
+		"redhat.vscode-yaml",
+	],
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index bbb870fb782f..be2324d198d2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,24 +1,21 @@
 {
 	"search.exclude": {
-		"**/node_modules": true
-	},
-	"typescript.tsdk": "node_modules/typescript/lib",
-	"files.associations": {
-		"*.test.ts": "typescript"
+		"**/node_modules": true,
 	},
 	"jest.jestCommandLine": "pnpm run jest",
 	"jest.runMode": "on-demand",
+	"editor.formatOnSave": false,
 	"editor.codeActionsOnSave": {
-		"source.fixAll": "explicit"
+		"source.fixAll": "explicit",
 	},
-	"editor.formatOnSave": false,
+	"typescript.tsdk": "./node_modules/typescript/lib",
 	"yaml.schemas": {
 		"https://json.schemastore.org/github-action.json": [
 			".github/actions/**/action.yaml",
-			".github/actions/**/action.yml"
+			".github/actions/**/action.yml",
 		],
 		"https://json.schemastore.org/github-issue-config.json": [
-			".github/ISSUE_TEMPLATE/config.yml"
-		]
-	}
+			".github/ISSUE_TEMPLATE/config.yml",
+		],
+	},
 }
diff --git a/packages/backend/.vscode/settings.json b/packages/backend/.vscode/settings.json
index 9fb3b29d4a6a..e7d77fdf8b8e 100644
--- a/packages/backend/.vscode/settings.json
+++ b/packages/backend/.vscode/settings.json
@@ -1,10 +1,21 @@
 {
-	"typescript.tsdk": "node_modules\\typescript\\lib",
-	"path-intellisense.mappings": {
-		"@": "${workspaceRoot}/packages/backend/src/"
-	},
-	"editor.formatOnSave": true,
+	// "path-intellisense.mappings": {
+	// 	"@": "${workspaceRoot}/packages/backend/src/"
+	// },
+	"prettier.enable": false,
+	"editor.formatOnSave": false,
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true
-	}
+		"source.fixAll.eslint": "explicit",
+		"source.organizeImports": "never",
+		"source.removeUnusedImports": "never",
+		"source.sortImports": "never",
+	},
+	"eslint.useFlatConfig": true,
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact",
+		"typescript",
+		"typescriptreact",
+	],
+	"typescript.tsdk": "./node_modules/typescript/lib",
 }
diff --git a/packages/frontend/.vscode/settings.json b/packages/frontend/.vscode/settings.json
index 1a79b6a7dc7d..0565bafa7632 100644
--- a/packages/frontend/.vscode/settings.json
+++ b/packages/frontend/.vscode/settings.json
@@ -1,11 +1,22 @@
 {
-	"typescript.tsdk": "node_modules\\typescript\\lib",
-	"path-intellisense.mappings": {
-		"@": "${workspaceRoot}/packages/frontend/src/"
+	// "path-intellisense.mappings": {
+	// 	"@": "${workspaceRoot}/packages/frontend/src/"
+	// },
+	"prettier.enable": false,
+	"editor.formatOnSave": false,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit",
+		"source.organizeImports": "never",
+		"source.removeUnusedImports": "never",
+		"source.sortImports": "never",
 	},
+	"eslint.useFlatConfig": true,
 	"eslint.validate": [
 		"javascript",
 		"javascriptreact",
-		"vue"
-	]
+		"typescript",
+		"typescriptreact",
+		"vue",
+	],
+	"typescript.tsdk": "./node_modules/typescript/lib",
 }
diff --git a/taiyme.code-workspace b/taiyme.code-workspace
new file mode 100644
index 000000000000..d7461fa5fecd
--- /dev/null
+++ b/taiyme.code-workspace
@@ -0,0 +1,52 @@
+{
+	"folders": [
+		{
+			"name": "root",
+			"path": ".",
+		},
+		{
+			"name": "backend",
+			"path": "./packages/backend",
+		},
+		{
+			"name": "frontend",
+			"path": "./packages/frontend",
+		},
+		{
+			"name": "frontend-embed",
+			"path": "./packages/frontend-embed",
+		},
+  ],
+  "settings": {
+		"search.exclude": {
+			"**/node_modules": true,
+		},
+		"jest.jestCommandLine": "pnpm run jest",
+		"jest.runMode": "on-demand",
+		"editor.formatOnSave": false,
+		"editor.codeActionsOnSave": {
+			"source.fixAll": "explicit",
+		},
+		"typescript.tsdk": "./node_modules/typescript/lib",
+		"yaml.schemas": {
+			"https://json.schemastore.org/github-action.json": [
+				".github/actions/**/action.yaml",
+				".github/actions/**/action.yml",
+			],
+			"https://json.schemastore.org/github-issue-config.json": [
+				".github/ISSUE_TEMPLATE/config.yml",
+			],
+		},
+	},
+	"extensions": {
+		"recommendations": [
+			"editorconfig.editorconfig",
+			"dbaeumer.vscode-eslint",
+			"Vue.volar",
+			"Orta.vscode-jest",
+			"mrmlnc.vscode-json5",
+			"github.vscode-github-actions",
+			"redhat.vscode-yaml",
+		],
+	},
+}

From d82c21818349d5e0a7a0789793a702a50df2895b Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Fri, 1 Nov 2024 20:55:23 +0900
Subject: [PATCH 02/11] =?UTF-8?q?fix:=20=E6=AC=A0=E8=90=BD=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=81=84=E3=82=8Bemit:change=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=20(#299)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkSwitch.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue
index 670b54527db1..00dfd1c038af 100644
--- a/packages/frontend/src/components/MkSwitch.vue
+++ b/packages/frontend/src/components/MkSwitch.vue
@@ -45,6 +45,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', v: boolean): void;
+	(ev: 'change', v: boolean): void;
 }>();
 
 const checked = computed(() => unref(props.modelValue));
@@ -54,7 +55,9 @@ const onKeydown = filterKeyboardEnterOrSpace(() => toggle());
 
 const toggle = () => {
 	if (disabled.value) return;
-	emit('update:modelValue', !checked.value);
+	const result = !checked.value;
+	emit('update:modelValue', result);
+	emit('change', result);
 };
 </script>
 

From 5b26ad5953b2c877ab796f64bd52abca8b956a4a Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Fri, 1 Nov 2024 20:56:35 +0900
Subject: [PATCH 03/11] =?UTF-8?q?fix:=20=E3=83=87=E3=82=B3=E3=83=AC?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E4=BB=98=E3=81=91?=
 =?UTF-8?q?=E3=82=8B=E3=81=A8MkAvatar=E3=81=A7=E3=82=A8=E3=83=A9=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=81=AA=E3=82=8B=E5=95=8F=E9=A1=8C=20(#300)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/avatar-decoration.dialog.vue     | 36 +++++++---------
 .../src/pages/settings/avatar-decoration.vue  | 42 ++++++++++---------
 2 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
index 853e536ea30b..2d186cf132fd 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
@@ -46,6 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { shallowRef, ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -53,39 +54,32 @@ import { i18n } from '@/i18n.js';
 import MkRange from '@/components/MkRange.vue';
 import { signinRequired } from '@/account.js';
 
+type AvatarDecoration = Misskey.entities.GetAvatarDecorationsResponse[number];
+type AvatarDecorationWithPosition = Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id' | 'url'>;
+
 const $i = signinRequired();
 
 const props = defineProps<{
 	usingIndex: number | null;
-	decoration: {
-		id: string;
-		url: string;
-		name: string;
-	};
+	decoration: AvatarDecoration;
 }>();
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;
-	(ev: 'attach', payload: {
-		angle: number;
-		flipH: boolean;
-		offsetX: number;
-		offsetY: number;
-	}): void;
-	(ev: 'update', payload: {
-		angle: number;
-		flipH: boolean;
-		offsetX: number;
-		offsetY: number;
-	}): void;
+	(ev: 'attach', payload: AvatarDecorationWithPosition): void;
+	(ev: 'update', payload: AvatarDecorationWithPosition): void;
 	(ev: 'detach'): void;
 }>();
 
 const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 const exceeded = computed(() => ($i.policies.avatarDecorationLimit - $i.avatarDecorations.length) <= 0);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const angle = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].angle : null) ?? 0);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const flipH = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].flipH : null) ?? false);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const offsetX = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].offsetX : null) ?? 0);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const offsetY = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].offsetY : null) ?? 0);
 
 const decorationsForPreview = computed(() => {
@@ -108,7 +102,7 @@ const decorationsForPreview = computed(() => {
 });
 
 function cancel() {
-	dialog.value.close();
+	dialog.value?.close();
 }
 
 async function update() {
@@ -118,7 +112,7 @@ async function update() {
 		offsetX: offsetX.value,
 		offsetY: offsetY.value,
 	});
-	dialog.value.close();
+	dialog.value?.close();
 }
 
 async function attach() {
@@ -128,12 +122,12 @@ async function attach() {
 		offsetX: offsetX.value,
 		offsetY: offsetY.value,
 	});
-	dialog.value.close();
+	dialog.value?.close();
 }
 
 async function detach() {
 	emit('detach');
-	dialog.value.close();
+	dialog.value?.close();
 }
 </script>
 
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue
index 3233817551c1..c81b75f19504 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.vue
@@ -19,13 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.decorations">
 						<XDecoration
 							v-for="(avatarDecoration, i) in $i.avatarDecorations"
-							:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)"
+							:key="avatarDecoration.id"
+							:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)!"
 							:angle="avatarDecoration.angle"
 							:flipH="avatarDecoration.flipH"
 							:offsetX="avatarDecoration.offsetX"
 							:offsetY="avatarDecoration.offsetY"
 							:active="true"
-							@click="openDecoration(avatarDecoration, i)"
+							@click="openDecoration(avatarDecorations.find(d => d.id === avatarDecoration.id)!, i)"
 						/>
 					</div>
 
@@ -61,55 +62,58 @@ import { signinRequired } from '@/account.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
+type AvatarDecoration = Misskey.entities.GetAvatarDecorationsResponse[number];
+type AvatarDecorationWithPosition = Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id' | 'url'>;
+
 const $i = signinRequired();
 
 const loading = ref(true);
-const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
+const avatarDecorations = ref<AvatarDecoration[]>([]);
 
 misskeyApi('get-avatar-decorations').then(_avatarDecorations => {
 	avatarDecorations.value = _avatarDecorations;
 	loading.value = false;
 });
 
-function openDecoration(avatarDecoration, index?: number) {
+function openDecoration(avatarDecoration: AvatarDecoration, index?: number) {
 	const { dispose } = os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {
 		decoration: avatarDecoration,
-		usingIndex: index,
+		usingIndex: index ?? null,
 	}, {
-		'attach': async (payload) => {
+		'attach': async (payload: AvatarDecorationWithPosition) => {
 			const decoration = {
+				...payload,
 				id: avatarDecoration.id,
-				angle: payload.angle,
-				flipH: payload.flipH,
-				offsetX: payload.offsetX,
-				offsetY: payload.offsetY,
-			};
+				url: avatarDecoration.url,
+			} as const satisfies AvatarDecorationWithPosition & Pick<AvatarDecoration, 'id' | 'url'>;
 			const update = [...$i.avatarDecorations, decoration];
 			await os.apiWithDialog('i/update', {
 				avatarDecorations: update,
 			});
 			$i.avatarDecorations = update;
 		},
-		'update': async (payload) => {
+		'update': async (payload: AvatarDecorationWithPosition) => {
+			if (index == null) return;
 			const decoration = {
+				...payload,
 				id: avatarDecoration.id,
-				angle: payload.angle,
-				flipH: payload.flipH,
-				offsetX: payload.offsetX,
-				offsetY: payload.offsetY,
-			};
+				url: avatarDecoration.url,
+			} as const satisfies AvatarDecorationWithPosition & Pick<AvatarDecoration, 'id' | 'url'>;
 			const update = [...$i.avatarDecorations];
 			update[index] = decoration;
 			await os.apiWithDialog('i/update', {
-				avatarDecorations: update,
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				avatarDecorations: update.map(({ url, ...d }) => d),
 			});
 			$i.avatarDecorations = update;
 		},
 		'detach': async () => {
+			if (index == null) return;
 			const update = [...$i.avatarDecorations];
 			update.splice(index, 1);
 			await os.apiWithDialog('i/update', {
-				avatarDecorations: update,
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				avatarDecorations: update.map(({ url, ...d }) => d),
 			});
 			$i.avatarDecorations = update;
 		},

From aa1a02d6a0e44879c5425f30d262cf62a7a6d701 Mon Sep 17 00:00:00 2001
From: "taiyme-release-bot[bot]"
 <182201358+taiyme-release-bot[bot]@users.noreply.github.com>
Date: Fri, 1 Nov 2024 13:42:29 +0000
Subject: [PATCH 04/11] Release: 2024.10.1-taiyme.1

---
 compose_example.yml              | 2 +-
 package.json                     | 2 +-
 packages/misskey-js/package.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose_example.yml b/compose_example.yml
index 9926a08147e3..4d7a96df1bea 100644
--- a/compose_example.yml
+++ b/compose_example.yml
@@ -1,7 +1,7 @@
 services:
   web:
     build: .
-    image: ghcr.io/taiyme/misskey:2024.10.1-taiyme.0
+    image: ghcr.io/taiyme/misskey:2024.10.1-taiyme.1
     restart: always
     links:
       - db
diff --git a/package.json b/package.json
index 56c2983e9889..dce7250d2950 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2024.10.1-taiyme.0",
+	"version": "2024.10.1-taiyme.1",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
diff --git a/packages/misskey-js/package.json b/packages/misskey-js/package.json
index e1f20974909d..89f43a1eb1f8 100644
--- a/packages/misskey-js/package.json
+++ b/packages/misskey-js/package.json
@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "misskey-js",
-	"version": "2024.10.1-taiyme.0",
+	"version": "2024.10.1-taiyme.1",
 	"description": "Misskey SDK for JavaScript",
 	"license": "MIT",
 	"main": "./built/index.js",

From 711ab846a967feeddbe0c908bee4b91646cec321 Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:50:27 +0900
Subject: [PATCH 05/11] =?UTF-8?q?fix(frontend):=20=E3=83=8E=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E6=8A=95=E7=A8=BF=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AB?=
 =?UTF-8?q?=E3=83=9B=E3=83=90=E3=83=BC=E6=99=82=E3=81=AE=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=81=8C=E9=81=A9=E7=94=A8=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=20(#305)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkPostForm.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 918e951387d5..b000a1010130 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1131,7 +1131,7 @@ defineExpose({
 	&:focus-visible {
 		outline: none;
 
-		.submitInner {
+		> .submitInner {
 			outline: 2px solid var(--MI_THEME-fgOnAccent);
 			outline-offset: -4px;
 		}
@@ -1146,13 +1146,13 @@ defineExpose({
 	}
 
 	&:not(:disabled):hover {
-		> .inner {
+		> .submitInner {
 			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
 		}
 	}
 
 	&:not(:disabled):active {
-		> .inner {
+		> .submitInner {
 			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
 		}
 	}

From 671060752319e09c81f71ca6b0138edfb0f606ad Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:31:44 +0900
Subject: [PATCH 06/11] =?UTF-8?q?fix(frontend):=20color-mix=E3=81=A7?=
 =?UTF-8?q?=E3=82=AF=E3=83=A9=E3=83=83=E3=82=B7=E3=83=A5=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C,=20hsl=E3=81=AEcalc=E3=81=AB=E5=A4=B1?=
 =?UTF-8?q?=E6=95=97=E3=81=99=E3=82=8B=E5=95=8F=E9=A1=8C=20=E3=81=AA?=
 =?UTF-8?q?=E3=81=A9=20(#304)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 idea/MkDisableSection.vue                     |  7 +-----
 packages/frontend/src/boot/common.ts          |  8 -------
 packages/frontend/src/components/MkButton.vue |  8 +++----
 .../src/components/MkChannelPreview.vue       |  2 +-
 .../frontend/src/components/MkContainer.vue   |  2 +-
 .../MkCustomEmojiDetailedDialog.vue           |  5 ----
 .../src/components/MkDateSeparatedList.vue    |  5 ----
 .../src/components/MkEmbedCodeGenDialog.vue   |  5 ----
 .../src/components/MkFlashPreview.vue         |  5 ----
 .../src/components/MkFoldableSection.vue      |  2 +-
 packages/frontend/src/components/MkFolder.vue |  5 ----
 .../src/components/MkInstanceCardMini.vue     | 21 +++++++---------
 .../frontend/src/components/MkMediaImage.vue  |  9 ++-----
 .../frontend/src/components/MkMediaVideo.vue  |  9 ++-----
 .../frontend/src/components/MkMention.vue     |  4 ++--
 packages/frontend/src/components/MkNote.vue   |  2 +-
 packages/frontend/src/components/MkOmit.vue   |  2 +-
 .../frontend/src/components/MkPostForm.vue    |  9 ++-----
 .../src/components/MkSubNoteContent.vue       |  2 +-
 .../src/components/MkUserCardMini.vue         | 13 ++++------
 .../src/components/TmsInstanceTicker.vue      |  4 ++--
 .../src/components/global/MkFooterSpacer.vue  |  5 ----
 .../src/components/global/MkPageHeader.vue    |  2 +-
 packages/frontend/src/pages/channel.vue       |  2 +-
 .../src/pages/welcome.timeline.note.vue       |  2 +-
 packages/frontend/src/style.scss              | 24 +++++++++++++++----
 .../src/ui/_common_/navbar-for-mobile.vue     |  2 +-
 packages/frontend/src/ui/_common_/navbar.vue  |  2 +-
 packages/frontend/src/ui/deck.vue             |  6 ++---
 packages/frontend/src/ui/universal.vue        |  6 ++---
 30 files changed, 64 insertions(+), 116 deletions(-)

diff --git a/idea/MkDisableSection.vue b/idea/MkDisableSection.vue
index 568241e68f86..642ccf130755 100644
--- a/idea/MkDisableSection.vue
+++ b/idea/MkDisableSection.vue
@@ -39,11 +39,6 @@ defineProps<{
 		transparent 0px 10px,
 		var(--c) 6px 16px
 	);
-	--c: color(from var(--MI_THEME-error) srgb r g b / 0.25);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset;
-	}
+	--c: rgb(from var(--MI_THEME-error) r g b / 0.25);
 }
 </style>
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 0b410c7bbb30..65d7f5a5e1ee 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -31,14 +31,6 @@ import { preventLongPressContextMenu } from '@/scripts/tms/prevent-longpress-con
 export async function common(createVue: () => App<Element>) {
 	console.info(`taiyme v${version}`);
 
-	//#region Detect WebKit engine
-	const ua = navigator.userAgent;
-	const isWebkitEngine = ua.includes('AppleWebKit') && !(ua.includes('Chrome') || ua.includes('Chromium'));
-	if (isWebkitEngine) {
-		document.documentElement.dataset.browserEngine = 'webkit';
-	}
-	//#endregion
-
 	if (_DEV_) {
 		console.warn('Development mode!!!');
 
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 39a87a34098c..6da65f5c6cc2 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -172,11 +172,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: var(--MI_THEME-accent);
 
 		&:not(:disabled):hover {
-			background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 		}
 
 		&:not(:disabled):active {
-			background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 		}
 	}
 
@@ -221,11 +221,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 
 		&:not(:disabled):hover {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 
 		&:not(:disabled):active {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index 99580df5e25c..0676b94e14f4 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -117,7 +117,7 @@ const bannerStyle = computed(() => {
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+			background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 		}
 
 		> .name {
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 01ca57bf8f2d..69d2200bc349 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -231,7 +231,7 @@ onUnmounted(() => {
 	left: 0;
 	width: 100%;
 	height: 64px; // .omitted
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showMoreFade {
diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
index ee89395c3566..b40671488220 100644
--- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
+++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@@ -94,11 +94,6 @@ const cancel = () => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index 3c14298535e7..ddd8401b9399 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -267,11 +267,6 @@ export default defineComponent({
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index eea97f9d00aa..7b30178a774f 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -313,11 +313,6 @@ onUnmounted(() => {
 		transparent 0px 10px,
 		var(--MI_THEME-panel) 6px 16px
 	);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
 }
 
 .embedCodeGenPreviewWrapper {
diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
index 6ec0765ec70e..f2b6c0d777bf 100644
--- a/packages/frontend/src/components/MkFlashPreview.vue
+++ b/packages/frontend/src/components/MkFlashPreview.vue
@@ -96,11 +96,6 @@ const props = defineProps<{
 			transparent 0px 10px,
 			var(--MI_THEME-bg) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	@media (max-width: 700px) {
diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index 17feaab1aa62..8e09fa84bd54 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -111,7 +111,7 @@ onMounted(() => {
 	top: var(--MI-stickyTop, 0px);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background-color: color(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") srgb r g b / 0.85);
+	background-color: rgb(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") r g b / 0.85);
 }
 
 .title {
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index d75723d1a190..2f2ba0b4be1b 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -235,10 +235,5 @@ onMounted(() => {
 		transparent 0px 10px,
 		var(--MI_THEME-panel) 6px 16px
 	);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
index 4f78dc28afd5..d44a2a41db8d 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.vue
+++ b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -81,47 +81,42 @@ $bodyInfoHieght: 16px;
 			transparent 0px 10px,
 			var(--c) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	&,
 	html[data-color-scheme=light] & {
 		&.isNotResponding {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #ffa500 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #0000ff 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-panel));
 		}
 
 		&.isBlocked {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #ff0000 12.5%, var(--MI_THEME-panel));
 		}
 	}
 
 	html[data-color-scheme=dark] & {
 		&.isNotResponding {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffa500 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #0000ff 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-panel));
 		}
 
 		&.isBlocked {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ff0000 25%, var(--MI_THEME-panel));
 		}
 	}
 }
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 0849e7d15fdb..5a687d2fd3e4 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -219,18 +219,13 @@ const showImageMenu = (ev: MouseEvent) => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), black 15%) srgb r g b / 0.25);
+		--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-bg));
 	}
 
 	html[data-color-scheme=dark] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), white 15%) srgb r g b / 0.5);
+		--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-bg));
 	}
 }
 
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 02f8203fe5ff..bc411547d87d 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -537,18 +537,13 @@ onDeactivated(() => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), black 15%) srgb r g b / 0.25);
+		--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-bg));
 	}
 
 	html[data-color-scheme=dark] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), white 15%) srgb r g b / 0.5);
+		--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-bg));
 	}
 }
 
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index 77cb4ac40790..2979dfda5459 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -72,11 +72,11 @@ const avatarUrlRef = computed(() => {
 	padding: 4px 8px 4px 4px;
 	border-radius: 999px;
 	color: var(--MI_THEME-mention);
-	background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
+	background: rgb(from var(--MI_THEME-mention) r g b / 0.1);
 
 	&.isMe {
 		color: var(--MI_THEME-mentionMe);
-		background: color(from var(--MI_THEME-mentionMe) srgb r g b / 0.1);
+		background: rgb(from var(--MI_THEME-mentionMe) r g b / 0.1);
 	}
 }
 
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index d665552527ee..38fcafbbd470 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -831,7 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	left: 0;
 	width: 100%;
 	height: 64px; // .contentCollapsed
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {
diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
index 8a0be5927f8d..c751dab3dbaf 100644
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@@ -87,7 +87,7 @@ onUnmounted(() => {
 	left: 0;
 	width: 100%;
 	height: 64px; // .omitted
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b000a1010130..1ba671ebe36a 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1147,13 +1147,13 @@ defineExpose({
 
 	&:not(:disabled):hover {
 		> .submitInner {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 
 	&:not(:disabled):active {
 		> .submitInner {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 }
@@ -1227,11 +1227,6 @@ defineExpose({
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 687c690ee6bb..9932e08c91c8 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -67,7 +67,7 @@ const collapsed = ref(isLong);
 	left: 0;
 	width: 100%;
 	height: 64px; // .collapsed
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index 404cbae275eb..e20bc376ec02 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -77,31 +77,26 @@ $bodyInfoHieght: 16px;
 			transparent 0px 10px,
 			var(--c) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	&,
 	html[data-color-scheme=light] & {
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #0000ff 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-panel));
 		}
 	}
 
 	html[data-color-scheme=dark] & {
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #0000ff 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-panel));
 		}
 	}
 }
diff --git a/packages/frontend/src/components/TmsInstanceTicker.vue b/packages/frontend/src/components/TmsInstanceTicker.vue
index 32ca01f594f6..41ade1fc464c 100644
--- a/packages/frontend/src/components/TmsInstanceTicker.vue
+++ b/packages/frontend/src/components/TmsInstanceTicker.vue
@@ -134,8 +134,8 @@ const tickerStateRef = computed(() => getTickerState(props));
 	background: linear-gradient(
 		var(--ticker-bg-deg),
 		rgba(0, 0, 0, 0) calc(100% - 3em),
-		color(from var(--ticker-bg, #777) srgb r g b / 0.35) calc(100% - 3em),
-		color(from var(--ticker-bg, #777) srgb r g b / 0.35) 100%
+		rgb(from var(--ticker-bg, #777) r g b / 0.35) calc(100% - 3em),
+		rgb(from var(--ticker-bg, #777) r g b / 0.35) 100%
 	);
 	color: #fff;
 	text-shadow: /* 0.866 ≈ sin(60deg) */
diff --git a/packages/frontend/src/components/global/MkFooterSpacer.vue b/packages/frontend/src/components/global/MkFooterSpacer.vue
index cd663621fa9c..bc3ad2513b1b 100644
--- a/packages/frontend/src/components/global/MkFooterSpacer.vue
+++ b/packages/frontend/src/components/global/MkFooterSpacer.vue
@@ -20,11 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 16b60ee6652e..bbf62f812acb 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -141,7 +141,7 @@ onUnmounted(() => {
 	backdrop-filter: var(--MI-blur, blur(15px));
 	border-bottom: solid 0.5px var(--MI_THEME-divider);
 	width: 100%;
-	background: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
+	background: rgb(from var(--MI_THEME-bg) r g b / 0.85);
 }
 
 .upper,
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 96661517ce43..f6b21bfe5a8a 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -310,7 +310,7 @@ definePageMetadata(() => ({
 	left: 0;
 	width: 100%;
 	height: 64px;
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .bannerStatus {
diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue
index 8fb84fd58ff3..7af7c65084cf 100644
--- a/packages/frontend/src/pages/welcome.timeline.note.vue
+++ b/packages/frontend/src/pages/welcome.timeline.note.vue
@@ -84,7 +84,7 @@ onUpdated(() => {
 		left: 0;
 		width: 100%;
 		height: 64px;
-		background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+		background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 	}
 }
 
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 5f5116be5b46..bf42969ad258 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -12,6 +12,10 @@
 
 	--MI-margin: var(--MI-marginFull);
 
+	--TMS-hsl-base-h: 1;
+	--TMS-hsl-base-s: 1;
+	--TMS-hsl-base-l: 1;
+
 	// switch dynamically
 	--MI-minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
 	--MI-minBottomSpacing: var(--MI-minBottomSpacingMobile);
@@ -19,6 +23,18 @@
 	@media (max-width: 500px) {
 		--MI-margin: var(--MI-marginHalf);
 	}
+
+	@supports (color: hsl(from #fff calc(h + 1deg) s l)) {
+		--TMS-hsl-base-h: 1deg;
+	}
+
+	@supports (color: hsl(from #fff h calc(s + 1%) l)) {
+		--TMS-hsl-base-s: 1%;
+	}
+
+	@supports (color: hsl(from #fff h s calc(l + 1%))) {
+		--TMS-hsl-base-l: 1%;
+	}
 }
 
 ::selection {
@@ -245,11 +261,11 @@ rt {
 	background: var(--MI_THEME-accent);
 
 	&:not(:disabled):hover {
-		background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+		background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 	}
 
 	&:not(:disabled):active {
-		background: hsl(from var(--MI_THEME-accent) h s calc(l - 5));
+		background: hsl(from var(--MI_THEME-accent) h s calc(l - (var(--TMS-hsl-base-l) * 5)));
 	}
 }
 
@@ -259,11 +275,11 @@ rt {
 	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 
 	&:not(:disabled):hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 
 	&:not(:disabled):active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 }
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index ea1f662549a2..53a88fff57d7 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -75,7 +75,7 @@ function more() {
 
 <style lang="scss" module>
 .root {
-	--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
+	--nav-bg-transparent: rgb(from var(--MI_THEME-navBg) r g b / 0.5);
 
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 97d022b485ff..26362eea436b 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -104,7 +104,7 @@ function more(ev: MouseEvent) {
 .root {
 	--nav-width: 250px;
 	--nav-icon-only-width: 80px;
-	--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
+	--nav-bg-transparent: rgb(from var(--MI_THEME-navBg) r g b / 0.5);
 
 	flex: 0 0 var(--nav-width);
 	width: var(--nav-width);
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 48687ed5d8f4..98dfe1e3b311 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -456,7 +456,7 @@ body {
 	}
 
 	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+		background: hsl(from var(--MI_THEME-panel) h s calc(l - (var(--TMS-hsl-base-l) * 2)));
 	}
 }
 
@@ -466,11 +466,11 @@ body {
 	color: var(--MI_THEME-fgOnAccent);
 
 	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 
 	&:active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 }
 
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 35f09d24cf95..014cddd07aca 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -428,7 +428,7 @@ $widgets-hide-threshold: 1090px;
 	}
 
 	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+		background: hsl(from var(--MI_THEME-panel) h s calc(l - (var(--TMS-hsl-base-l) * 2)));
 	}
 }
 
@@ -438,11 +438,11 @@ $widgets-hide-threshold: 1090px;
 	color: var(--MI_THEME-fgOnAccent);
 
 	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 
 	&:active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 }
 

From 65280cf179f14e9a6ed16b8f4fca62b4f843e454 Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Mon, 11 Nov 2024 23:06:20 +0900
Subject: [PATCH 07/11] enhance(tms): /tms/settings -> /tms/features (#306)

---
 locales/index.d.ts                            |  54 ++-------
 locales/ja-JP.yml                             |  20 +---
 .../src/components/TmsSoftwareDonation.vue    |   2 +-
 packages/frontend/src/pages/tms/about.vue     |   4 +-
 .../frontend/src/pages/tms/features.form.vue  | 106 +++++++++++++++++
 packages/frontend/src/pages/tms/features.vue  |  38 ++++++
 .../src/pages/tms/flags/index.main.vue        | 110 ------------------
 .../frontend/src/pages/tms/flags/index.vue    |  67 -----------
 .../src/pages/tms/settings/index.main.vue     | 108 -----------------
 .../frontend/src/pages/tms/settings/index.vue |  62 ----------
 packages/frontend/src/router/definition.ts    |  10 +-
 packages/frontend/src/style.scss              |   4 +
 packages/frontend/src/ui/_common_/common.ts   |   4 +-
 13 files changed, 173 insertions(+), 416 deletions(-)
 create mode 100644 packages/frontend/src/pages/tms/features.form.vue
 create mode 100644 packages/frontend/src/pages/tms/features.vue
 delete mode 100644 packages/frontend/src/pages/tms/flags/index.main.vue
 delete mode 100644 packages/frontend/src/pages/tms/flags/index.vue
 delete mode 100644 packages/frontend/src/pages/tms/settings/index.main.vue
 delete mode 100644 packages/frontend/src/pages/tms/settings/index.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index e0e4a649bdf8..143644ac1fe1 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -10485,29 +10485,25 @@ export interface Locale extends ILocale {
          */
         readonly "aboutTaiyme": string;
         /**
-         * taiyme拡張機能
+         * taiyme限定機能
          */
-        readonly "taiymeSettings": string;
+        readonly "taiymeFeatures": string;
         /**
-         * taiyme実験的機能
+         * これらの機能はtaiymeで独自実装したものです。
          */
-        readonly "taiymeFlags": string;
+        readonly "taiymeFeaturesDescription": string;
         /**
          * {name}は、Misskeyの派生であるtaiymeを使用したサーバーのひとつです。
          */
         readonly "poweredByTaiyme": ParameterizedString<"name">;
         /**
-         * {name}を支援
+         * taiyを支援する
          */
-        readonly "supportX": ParameterizedString<"name">;
+        readonly "supportTaiy": string;
         /**
          * コミットハッシュ
          */
         readonly "commitHash": string;
-        /**
-         * 問題の報告や要望はGitHubで受け付けています。
-         */
-        readonly "reportIssuesToGithub": string;
         /**
          * センシティブな画像
          */
@@ -10573,14 +10569,10 @@ export interface Locale extends ILocale {
          */
         readonly "updatedX": ParameterizedString<"x">;
         readonly "_about": {
-            /**
-             * taiymeについて
-             */
-            readonly "title": string;
             /**
              * taiymeは、Misskeyから派生したオープンソースのソフトウェアです。
              */
-            readonly "description": string;
+            readonly "taiymeIsOSS": string;
             /**
              * プロジェクトメンバー
              */
@@ -10594,15 +10586,7 @@ export interface Locale extends ILocale {
              */
             readonly "patrons": string;
         };
-        readonly "_settings": {
-            /**
-             * taiyme拡張機能
-             */
-            readonly "title": string;
-            /**
-             * これらの機能はtaiymeで独自実装したものです。
-             */
-            readonly "description": string;
+        readonly "_features": {
             readonly "_tickerPosition": {
                 /**
                  * ノートのサーバー情報の表示位置
@@ -10683,28 +10667,6 @@ export interface Locale extends ILocale {
                  */
                 readonly "caption": string;
             };
-        };
-        readonly "_flags": {
-            /**
-             * taiyme実験的機能
-             */
-            readonly "title": string;
-            /**
-             * これらの機能はtaiymeで独自実装したものです。
-             */
-            readonly "description": string;
-            /**
-             * これらの設定を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。
-             */
-            readonly "warning": ParameterizedString<"name">;
-            /**
-             * {x}を強制取得
-             */
-            readonly "forceFetchX": ParameterizedString<"x">;
-            /**
-             * {x}を開く
-             */
-            readonly "openX": ParameterizedString<"x">;
             readonly "_preventLongPressContextMenu": {
                 /**
                  * 長押しによるコンテキストメニューイベントの発行を防ぐ
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 26b7c5c742fc..6060c105f0c6 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2794,12 +2794,11 @@ _tms:
   taiy: "taiy"
   taiyme: "taiyme"
   aboutTaiyme: "taiymeについて"
-  taiymeSettings: "taiyme拡張機能"
-  taiymeFlags: "taiyme実験的機能"
+  taiymeFeatures: "taiyme限定機能"
+  taiymeFeaturesDescription: "これらの機能はtaiymeで独自実装したものです。"
   poweredByTaiyme: "{name}は、Misskeyの派生であるtaiymeを使用したサーバーのひとつです。"
-  supportX: "{name}を支援"
+  supportTaiy: "taiyを支援する"
   commitHash: "コミットハッシュ"
-  reportIssuesToGithub: "問題の報告や要望はGitHubで受け付けています。"
   sensitiveImage: "センシティブな画像"
   sensitiveVideo: "センシティブな動画"
   sensitiveAudio: "センシティブな音声"
@@ -2817,14 +2816,11 @@ _tms:
   taiymeUpdated: "taiymeが更新されました！"
   updatedX: "{x}が更新されました！"
   _about:
-    title: "taiymeについて"
-    description: "taiymeは、Misskeyから派生したオープンソースのソフトウェアです。"
+    taiymeIsOSS: "taiymeは、Misskeyから派生したオープンソースのソフトウェアです。"
     projectMembers: "プロジェクトメンバー"
     contributors: "コントリビューター"
     patrons: "支援者"
-  _settings:
-    title: "taiyme拡張機能"
-    description: "これらの機能はtaiymeで独自実装したものです。"
+  _features:
     _tickerPosition:
       label: "ノートのサーバー情報の表示位置"
       default: "デフォルト"
@@ -2847,12 +2843,6 @@ _tms:
     _pullToRefreshAllReload:
       label: "「引っ張ってリロード」でページ全体を再読み込みする"
       caption: "構成しているページ全体を再読み込みする動作に置き換えます。"
-  _flags:
-    title: "taiyme実験的機能"
-    description: "これらの機能はtaiymeで独自実装したものです。"
-    warning: "これらの設定を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。"
-    forceFetchX: "{x}を強制取得"
-    openX: "{x}を開く"
     _preventLongPressContextMenu:
       label: "長押しによるコンテキストメニューイベントの発行を防ぐ"
       caption: "長押しを含む操作が中断される問題を解消します。"
diff --git a/packages/frontend/src/components/TmsSoftwareDonation.vue b/packages/frontend/src/components/TmsSoftwareDonation.vue
index 25eaf2b8defe..9b27c11426dd 100644
--- a/packages/frontend/src/components/TmsSoftwareDonation.vue
+++ b/packages/frontend/src/components/TmsSoftwareDonation.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <FormLink to="https://u.taiy.me/donate" external>
 	<template #icon><i class="ti ti-pig-money"></i></template>
-	<template #default>{{ i18n.tsx._tms.supportX({ name: i18n.ts._tms.taiy }) }}</template>
+	<template #default>{{ i18n.ts._tms.supportTaiy }}</template>
 	<template #suffix>Donation</template>
 </FormLink>
 </template>
diff --git a/packages/frontend/src/pages/tms/about.vue b/packages/frontend/src/pages/tms/about.vue
index bd6f3f809cf9..500342699fa2 100644
--- a/packages/frontend/src/pages/tms/about.vue
+++ b/packages/frontend/src/pages/tms/about.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :contentMax="600" :marginMin="20">
 			<div class="_gaps_m">
 				<TmsNoCache><TmsSoftwareBanner/></TmsNoCache>
-				<div style="text-align: center;">{{ i18n.ts._tms._about.description }}</div>
+				<div style="text-align: center;">{{ i18n.ts._tms._about.taiymeIsOSS }}</div>
 				<FormSection>
 					<div class="_gaps_s">
 						<TmsSoftwareRepository/>
@@ -61,7 +61,7 @@ import TmsSoftwareDonation from '@/components/TmsSoftwareDonation.vue';
 import TmsSoftwareRepository from '@/components/TmsSoftwareRepository.vue';
 
 definePageMetadata(() => ({
-	title: i18n.ts._tms._about.title,
+	title: i18n.ts._tms.aboutTaiyme,
 	icon: 'ti ti-info-circle',
 }));
 </script>
diff --git a/packages/frontend/src/pages/tms/features.form.vue b/packages/frontend/src/pages/tms/features.form.vue
new file mode 100644
index 000000000000..17bcb4933f36
--- /dev/null
+++ b/packages/frontend/src/pages/tms/features.form.vue
@@ -0,0 +1,106 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<div class="_gaps_s">
+		<MkInfo>{{ i18n.ts._tms.taiymeFeaturesDescription }} <MkA to="/tms/about" class="_link">{{ i18n.ts.learnMore }}</MkA></MkInfo>
+	</div>
+	<MkFolder defaultOpen>
+		<template #icon><i class="ti ti-palette"></i></template>
+		<template #label>{{ i18n.ts.appearance }}</template>
+		<template v-if="appearancesForm.modified.value" #footer>
+			<MkFormFooter :form="appearancesForm"/>
+		</template>
+		<div class="_gaps">
+			<MkSelect v-model="appearancesForm.state.tickerPosition">
+				<template #label>
+					<span>{{ i18n.ts._tms._features._tickerPosition.label }}</span>
+					<span v-if="appearancesForm.modifiedStates.tickerPosition" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<option value="default">{{ i18n.ts._tms._features._tickerPosition.default }}</option>
+				<option value="leftVerticalBar">{{ i18n.ts._tms._features._tickerPosition.leftVerticalBar }}</option>
+				<option value="rightVerticalBar">{{ i18n.ts._tms._features._tickerPosition.rightVerticalBar }}</option>
+				<option value="leftWatermark">{{ i18n.ts._tms._features._tickerPosition.leftWatermark }}</option>
+				<option value="rightWatermark">{{ i18n.ts._tms._features._tickerPosition.rightWatermark }}</option>
+			</MkSelect>
+			<MkSelect v-model="appearancesForm.state.superMenuDisplayMode">
+				<template #label>
+					<span>{{ i18n.ts._tms._features._superMenuDisplayMode.label }}</span>
+					<span v-if="appearancesForm.modifiedStates.superMenuDisplayMode" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._features._superMenuDisplayMode.caption }}</template>
+				<option value="default">{{ i18n.ts._tms._features._superMenuDisplayMode.default }}</option>
+				<option value="classic">{{ i18n.ts._tms._features._superMenuDisplayMode.classic }}</option>
+				<option value="forceList">{{ i18n.ts._tms._features._superMenuDisplayMode.forceList }}</option>
+			</MkSelect>
+		</div>
+	</MkFolder>
+	<MkFolder defaultOpen>
+		<template #icon><i class="ti ti-hand-click"></i></template>
+		<template #label>{{ i18n.ts.operations }}</template>
+		<template v-if="operationsForm.modified.value" #footer>
+			<MkFormFooter :form="operationsForm"/>
+		</template>
+		<div class="_gaps">
+			<MkSelect v-model="operationsForm.state.pullToRefreshSensitivity">
+				<template #label>
+					<span>{{ i18n.ts._tms._features._pullToRefreshSensitivity.label }}</span>
+					<span v-if="operationsForm.modifiedStates.pullToRefreshSensitivity" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._features._pullToRefreshSensitivity.caption }}</template>
+				<option value="low">{{ i18n.ts._tms._features._pullToRefreshSensitivity.low }}</option>
+				<option value="middle">{{ i18n.ts._tms._features._pullToRefreshSensitivity.middle }}</option>
+				<option value="high">{{ i18n.ts._tms._features._pullToRefreshSensitivity.high }}</option>
+			</MkSelect>
+			<MkSwitch v-model="operationsForm.state.pullToRefreshAllReload">
+				<template #label>
+					<span>{{ i18n.ts._tms._features._pullToRefreshAllReload.label }}</span>
+					<span v-if="operationsForm.modifiedStates.pullToRefreshAllReload" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._features._pullToRefreshAllReload.caption }}</template>
+			</MkSwitch>
+			<MkSwitch v-model="operationsForm.state.preventLongPressContextMenu">
+				<template #label>
+					<span>{{ i18n.ts._tms._features._preventLongPressContextMenu.label }}</span>
+					<span class="_beta">{{ i18n.ts.experimentalFeatures }}</span>
+					<span v-if="operationsForm.modifiedStates.preventLongPressContextMenu" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._features._preventLongPressContextMenu.caption }}</template>
+			</MkSwitch>
+		</div>
+	</MkFolder>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { useForm } from '@/scripts/use-form.js';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { tmsStore } from '@/tms/store.js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkFormFooter from '@/components/MkFormFooter.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+
+const appearancesForm = useForm({
+	tickerPosition: tmsStore.state.tickerPosition,
+	superMenuDisplayMode: tmsStore.state.superMenuDisplayMode,
+}, async (state) => {
+	tmsStore.set('tickerPosition', state.tickerPosition);
+	tmsStore.set('superMenuDisplayMode', state.superMenuDisplayMode);
+});
+
+const operationsForm = useForm({
+	pullToRefreshSensitivity: tmsStore.state.pullToRefreshSensitivity,
+	pullToRefreshAllReload: tmsStore.state.pullToRefreshAllReload,
+	preventLongPressContextMenu: tmsFlaskStore.state.preventLongPressContextMenu,
+}, async (state) => {
+	tmsStore.set('pullToRefreshSensitivity', state.pullToRefreshSensitivity);
+	tmsStore.set('pullToRefreshAllReload', state.pullToRefreshAllReload);
+	tmsFlaskStore.set('preventLongPressContextMenu', state.preventLongPressContextMenu);
+});
+</script>
diff --git a/packages/frontend/src/pages/tms/features.vue b/packages/frontend/src/pages/tms/features.vue
new file mode 100644
index 000000000000..4d7e7d7550bc
--- /dev/null
+++ b/packages/frontend/src/pages/tms/features.vue
@@ -0,0 +1,38 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<template #default>
+		<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
+			<FormSuspense :p="ready">
+				<XFeaturesForm/>
+			</FormSuspense>
+		</MkSpacer>
+	</template>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { tmsStore } from '@/tms/store.js';
+import FormSuspense from '@/components/form/suspense.vue';
+
+const ready = async () => {
+	await tmsStore.loaded;
+	await tmsFlaskStore.loaded;
+};
+
+const XFeaturesForm = defineAsyncComponent(() => import('@/pages/tms/features.form.vue'));
+
+definePageMetadata(() => ({
+	title: i18n.ts._tms.taiymeFeatures,
+	icon: 'ti ti-settings',
+}));
+</script>
diff --git a/packages/frontend/src/pages/tms/flags/index.main.vue b/packages/frontend/src/pages/tms/flags/index.main.vue
deleted file mode 100644
index a0778252c5b2..000000000000
--- a/packages/frontend/src/pages/tms/flags/index.main.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
-	<FormSection>
-		<div class="_gaps">
-			<MkSwitch v-model="preventLongPressContextMenu">
-				<template #label>{{ i18n.ts._tms._flags._preventLongPressContextMenu.label }}</template>
-				<template #caption>{{ i18n.ts._tms._flags._preventLongPressContextMenu.caption }}</template>
-			</MkSwitch>
-		</div>
-	</FormSection>
-	<FormSection>
-		<template #label>For developer</template>
-		<div class="_gaps_s">
-			<MkFolder defaultOpen>
-				<template #label>ForceFetchX</template>
-				<div class="_buttons">
-					<MkButton @click="forceFetchLocale">{{ i18n.tsx._tms._flags.forceFetchX({ x: `${lang}.${version}.json` }) }}</MkButton>
-				</div>
-			</MkFolder>
-			<MkFolder defaultOpen>
-				<template #label>OpenX</template>
-				<div class="_buttons">
-					<MkButton @click="openMkUpdated">{{ i18n.tsx._tms._flags.openX({ x: 'MkUpdated' }) }}</MkButton>
-					<MkButton @click="openMkDonation">{{ i18n.tsx._tms._flags.openX({ x: 'MkDonation' }) }}</MkButton>
-				</div>
-			</MkFolder>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, readonly, ref, watch } from 'vue';
-import { commitHash, lang, version } from '@@/js/config.js';
-import { i18n } from '@/i18n.js';
-import { miLocalStorage } from '@/local-storage.js';
-import { confirm, popup, waiting } from '@/os.js';
-import { tmsFlaskStore } from '@/tms/flask-store.js';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-
-//#region 即時変更
-const preventLongPressContextMenu = computed(tmsFlaskStore.makeGetterSetter('preventLongPressContextMenu'));
-//#endregion
-
-const confirmDialog = async (): Promise<boolean> => {
-	const { canceled } = await confirm({
-		type: 'info',
-		text: 'Execute?',
-		okText: 'Yes',
-		cancelText: 'No',
-	});
-	return !canceled;
-};
-
-const forceFetchLocale = async (): Promise<void> => {
-	if (!(await confirmDialog())) return;
-	waiting();
-	const revision = commitHash ?? 'unknown';
-	const newLocaleVersion = `${version}+REV:${revision}`;
-	const res = await window.fetch(`/assets/locales/${lang}.${version}.json?date=${Date.now().toString()}`);
-	if (res.status === 200) {
-		const newLocale = await res.text();
-		miLocalStorage.setItem('locale', newLocale);
-		miLocalStorage.setItem('localeVersion', newLocaleVersion);
-	}
-	location.reload();
-};
-
-const openMkUpdated = async (): Promise<void> => {
-	if (!(await confirmDialog())) return;
-	const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {
-		closed: () => dispose(),
-	});
-};
-
-const openMkDonation = async (): Promise<void> => {
-	if (!(await confirmDialog())) return;
-	const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, {
-		closed: () => dispose(),
-	});
-};
-
-const edited = ref(false);
-const changed = ref(false);
-
-watch([
-], () => {
-	edited.value = true;
-	changed.value = true;
-}, { deep: true });
-
-const save = (): void => {
-	if (!changed.value) return;
-	changed.value = false;
-};
-
-defineExpose({
-	save,
-	edited: readonly(edited),
-	changed: readonly(changed),
-});
-</script>
diff --git a/packages/frontend/src/pages/tms/flags/index.vue b/packages/frontend/src/pages/tms/flags/index.vue
deleted file mode 100644
index a6dc29977647..000000000000
--- a/packages/frontend/src/pages/tms/flags/index.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<template #default>
-		<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
-			<div class="_gaps_m">
-				<TmsSoftwareVersions/>
-				<div class="_gaps_s">
-					<MkInfo>{{ i18n.ts._tms._flags.description }}</MkInfo>
-					<MkInfo warn>{{ i18n.tsx._tms._flags.warning({ name: instance.name ?? host }) }}</MkInfo>
-					<MkInfo>{{ i18n.ts._tms.reportIssuesToGithub }} <a href="https://github.com/taiyme/misskey/issues" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a></MkInfo>
-				</div>
-				<FormSuspense :p="ready">
-					<XMain ref="xMain"/>
-				</FormSuspense>
-				<div class="_buttonsCenter"><MkButton rounded small link to="/tms/settings"><i class="ti ti-settings"></i> {{ i18n.ts._tms.taiymeSettings }}</MkButton></div>
-			</div>
-		</MkSpacer>
-	</template>
-	<template v-if="xMain" #footer>
-		<div v-show="xMain.edited" :class="$style.footer">
-			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
-				<MkButton primary rounded :disabled="!xMain.changed" @click="xMain.save()"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-			</MkSpacer>
-		</div>
-	</template>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, shallowRef } from 'vue';
-import { host } from '@@/js/config.js';
-import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { tmsFlaskStore } from '@/tms/flask-store.js';
-import { tmsStore } from '@/tms/store.js';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';
-
-const ready = async (): Promise<void> => {
-	await tmsStore.loaded;
-	await tmsFlaskStore.loaded;
-};
-
-const XMain = defineAsyncComponent(() => import('@/pages/tms/flags/index.main.vue'));
-const xMain = shallowRef<InstanceType<typeof XMain> | null>(null);
-
-definePageMetadata(() => ({
-	title: i18n.ts._tms._flags.title,
-	icon: 'ti ti-flask',
-}));
-</script>
-
-<style lang="scss" module>
-.footer {
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
-}
-</style>
diff --git a/packages/frontend/src/pages/tms/settings/index.main.vue b/packages/frontend/src/pages/tms/settings/index.main.vue
deleted file mode 100644
index 4dd0b2d70537..000000000000
--- a/packages/frontend/src/pages/tms/settings/index.main.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
-	<FormSection>
-		<template #label>{{ i18n.ts.appearance }}</template>
-		<div class="_gaps">
-			<MkSelect v-model="tickerPosition">
-				<template #label>{{ i18n.ts._tms._settings._tickerPosition.label }}</template>
-				<option value="default">{{ i18n.ts._tms._settings._tickerPosition.default }}</option>
-				<option value="leftVerticalBar">{{ i18n.ts._tms._settings._tickerPosition.leftVerticalBar }}</option>
-				<option value="rightVerticalBar">{{ i18n.ts._tms._settings._tickerPosition.rightVerticalBar }}</option>
-				<option value="leftWatermark">{{ i18n.ts._tms._settings._tickerPosition.leftWatermark }}</option>
-				<option value="rightWatermark">{{ i18n.ts._tms._settings._tickerPosition.rightWatermark }}</option>
-			</MkSelect>
-			<MkSelect v-model="superMenuDisplayMode">
-				<template #label>{{ i18n.ts._tms._settings._superMenuDisplayMode.label }}</template>
-				<template #caption>{{ i18n.ts._tms._settings._superMenuDisplayMode.caption }}</template>
-				<option value="default">{{ i18n.ts._tms._settings._superMenuDisplayMode.default }}</option>
-				<option value="classic">{{ i18n.ts._tms._settings._superMenuDisplayMode.classic }}</option>
-				<option value="forceList">{{ i18n.ts._tms._settings._superMenuDisplayMode.forceList }}</option>
-			</MkSelect>
-		</div>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts.operations }}</template>
-		<div class="_gaps">
-			<MkSelect v-model="pullToRefreshSensitivity">
-				<template #label>{{ i18n.ts._tms._settings._pullToRefreshSensitivity.label }}</template>
-				<template #caption>{{ i18n.ts._tms._settings._pullToRefreshSensitivity.caption }}</template>
-				<option value="low">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.low }}</option>
-				<option value="middle">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.middle }}</option>
-				<option value="high">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.high }}</option>
-			</MkSelect>
-			<MkSwitch v-model="pullToRefreshAllReload">
-				<template #label>{{ i18n.ts._tms._settings._pullToRefreshAllReload.label }}</template>
-				<template #caption>{{ i18n.ts._tms._settings._pullToRefreshAllReload.caption }}</template>
-			</MkSwitch>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, readonly, ref, watch } from 'vue';
-import { i18n } from '@/i18n.js';
-import { confirm } from '@/os.js';
-import { unisonReload } from '@/scripts/unison-reload.js';
-import { tmsStore } from '@/tms/store.js';
-import FormSection from '@/components/form/section.vue';
-import MkSelect from '@/components/MkSelect.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-
-//#region 即時変更
-const superMenuDisplayMode = computed(tmsStore.makeGetterSetter('superMenuDisplayMode'));
-const pullToRefreshAllReload = computed(tmsStore.makeGetterSetter('pullToRefreshAllReload'));
-//#endregion
-
-//#region 即時変更 (ダイアログ付き)
-const tickerPosition = computed({
-	get: () => tmsStore.reactiveState.tickerPosition.value,
-	set: (newValue) => {
-		tmsStore.set('tickerPosition', newValue);
-		reloadAsk();
-	},
-});
-const pullToRefreshSensitivity = computed({
-	get: () => tmsStore.reactiveState.pullToRefreshSensitivity.value,
-	set: (newValue) => {
-		tmsStore.set('pullToRefreshSensitivity', newValue);
-		reloadAsk();
-	},
-});
-//#endregion
-
-const reloadAsk = async (): Promise<void> => {
-	const { canceled } = await confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
-
-	unisonReload();
-};
-
-const edited = ref(false);
-const changed = ref(false);
-
-watch([
-], () => {
-	edited.value = true;
-	changed.value = true;
-}, { deep: true });
-
-const save = (): void => {
-	if (!changed.value) return;
-	changed.value = false;
-};
-
-defineExpose({
-	save,
-	edited: readonly(edited),
-	changed: readonly(changed),
-});
-</script>
diff --git a/packages/frontend/src/pages/tms/settings/index.vue b/packages/frontend/src/pages/tms/settings/index.vue
deleted file mode 100644
index 079d77050d23..000000000000
--- a/packages/frontend/src/pages/tms/settings/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<template #default>
-		<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
-			<div class="_gaps_m">
-				<div class="_gaps_s">
-					<MkInfo>{{ i18n.ts._tms._settings.description }}</MkInfo>
-					<MkInfo>{{ i18n.ts._tms.reportIssuesToGithub }} <a href="https://github.com/taiyme/misskey/issues" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a></MkInfo>
-				</div>
-				<FormSuspense :p="ready">
-					<XMain ref="xMain"/>
-				</FormSuspense>
-				<div class="_buttonsCenter"><MkButton rounded small link to="/tms/flags"><i class="ti ti-flask"></i> {{ i18n.ts._tms.taiymeFlags }}</MkButton></div>
-			</div>
-		</MkSpacer>
-	</template>
-	<template v-if="xMain" #footer>
-		<div v-show="xMain.edited" :class="$style.footer">
-			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
-				<MkButton primary rounded :disabled="!xMain.changed" @click="xMain.save()"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-			</MkSpacer>
-		</div>
-	</template>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, shallowRef } from 'vue';
-import { i18n } from '@/i18n.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { tmsFlaskStore } from '@/tms/flask-store.js';
-import { tmsStore } from '@/tms/store.js';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-
-const ready = async (): Promise<void> => {
-	await tmsStore.loaded;
-	await tmsFlaskStore.loaded;
-};
-
-const XMain = defineAsyncComponent(() => import('@/pages/tms/settings/index.main.vue'));
-const xMain = shallowRef<InstanceType<typeof XMain> | null>(null);
-
-definePageMetadata(() => ({
-	title: i18n.ts._tms._settings.title,
-	icon: 'ti ti-settings',
-}));
-</script>
-
-<style lang="scss" module>
-.footer {
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
-}
-</style>
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index 31e9c6491910..002b2871cc15 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -579,17 +579,21 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/tms/about',
 	component: page(() => import('@/pages/tms/about.vue')),
+}, {
+	path: '/tms/features',
+	component: page(() => import('@/pages/tms/features.vue')),
+	loginRequired: true,
 }, {
 	path: '/tms/settings',
-	component: page(() => import('@/pages/tms/settings/index.vue')),
+	redirect: '/tms/features',
 	loginRequired: true,
 }, {
 	path: '/tms/flags',
-	component: page(() => import('@/pages/tms/flags/index.vue')),
+	redirect: '/tms/features',
 	loginRequired: true,
 }, {
 	path: '/settings/taiyme-services',
-	redirect: '/tms/settings',
+	redirect: '/tms/features',
 	loginRequired: true,
 }, {
 	name: 'index',
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index bf42969ad258..eece78a6cb48 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -383,6 +383,8 @@ rt {
 	border: solid 1px var(--MI_THEME-accent);
 	border-radius: 4px;
 	vertical-align: top;
+	display: inline-block;
+	line-height: 1;
 }
 
 ._modified {
@@ -393,6 +395,8 @@ rt {
 	border: solid 1px var(--MI_THEME-warn);
 	border-radius: 4px;
 	vertical-align: top;
+	display: inline-block;
+	line-height: 1;
 }
 
 ._table {
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index 1b71027bf1cd..f589fcd6f914 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -157,9 +157,9 @@ export function openInstanceMenu(ev: MouseEvent) {
 		to: '/tms/about',
 	}, {
 		type: 'link',
-		text: i18n.ts._tms.taiymeSettings,
+		text: i18n.ts._tms.taiymeFeatures,
 		icon: 'ti ti-settings',
-		to: '/tms/settings',
+		to: '/tms/features',
 	});
 
 	os.popupMenu(menuItems, ev.currentTarget ?? ev.target, {

From 98e77270b31c82792903efd843376ae7c5e20db9 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 11 Nov 2024 23:11:17 +0900
Subject: [PATCH 08/11] chore(frontend): update patrons

---
 packages/frontend/src/tms/contributors.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/tms/contributors.ts b/packages/frontend/src/tms/contributors.ts
index b3e13eeaa954..58ffcf115adf 100644
--- a/packages/frontend/src/tms/contributors.ts
+++ b/packages/frontend/src/tms/contributors.ts
@@ -44,4 +44,5 @@ export const patrons = [
 	'Yagileo',
 	'nanasina',
 	'すい',
+	'ポンの助',
 ] as const satisfies Patron[];

From dd089d32973f54addea42630dff8696c8e9f53a5 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 11 Nov 2024 23:16:34 +0900
Subject: [PATCH 09/11] chore(frontend): update projectMembers

---
 packages/frontend/src/tms/contributors.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/tms/contributors.ts b/packages/frontend/src/tms/contributors.ts
index 58ffcf115adf..1e7e70ef88d4 100644
--- a/packages/frontend/src/tms/contributors.ts
+++ b/packages/frontend/src/tms/contributors.ts
@@ -22,15 +22,15 @@ export const projectMembers = [
 		href: 'https://github.com/cffnpwr',
 		iconUrl: 'https://avatars.githubusercontent.com/u/86540016?v=4',
 	},
-] as const satisfies Contributor[];
-
-export const contributors = [
 	{
 		name: '@souhait0614',
 		href: 'https://github.com/souhait0614',
 		iconUrl: 'https://avatars.githubusercontent.com/u/62732828?v=4',
 	},
-] as const satisfies Contributor[];
+] satisfies Contributor[] as Contributor[];
+
+export const contributors = [
+] satisfies Contributor[] as Contributor[];
 
 export const patrons = [
 	'すえ',
@@ -45,4 +45,4 @@ export const patrons = [
 	'nanasina',
 	'すい',
 	'ポンの助',
-] as const satisfies Patron[];
+] satisfies Patron[] as Patron[];

From de9ad8f4f2d3e95abe51bd6ab29d50ea903704cb Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Tue, 12 Nov 2024 00:07:53 +0900
Subject: [PATCH 10/11] =?UTF-8?q?enhance(frontend/tms):=20taiyme=E9=99=90?=
 =?UTF-8?q?=E5=AE=9A=E6=A9=9F=E8=83=BD=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3?=
 =?UTF-8?q?=E3=82=AF=E3=82=92navbar=E3=81=AB=E8=BF=BD=E5=8A=A0=20(#307)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/tms/features.vue            | 2 +-
 packages/frontend/src/ui/_common_/common.ts             | 2 +-
 packages/frontend/src/ui/_common_/navbar-for-mobile.vue | 3 +++
 packages/frontend/src/ui/_common_/navbar.vue            | 3 +++
 packages/frontend/src/ui/classic.header.vue             | 3 +++
 packages/frontend/src/ui/classic.sidebar.vue            | 3 +++
 6 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/tms/features.vue b/packages/frontend/src/pages/tms/features.vue
index 4d7e7d7550bc..963772adc35e 100644
--- a/packages/frontend/src/pages/tms/features.vue
+++ b/packages/frontend/src/pages/tms/features.vue
@@ -33,6 +33,6 @@ const XFeaturesForm = defineAsyncComponent(() => import('@/pages/tms/features.fo
 
 definePageMetadata(() => ({
 	title: i18n.ts._tms.taiymeFeatures,
-	icon: 'ti ti-settings',
+	icon: 'ti ti-settings-plus',
 }));
 </script>
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index f589fcd6f914..b1a669597c34 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -158,7 +158,7 @@ export function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts._tms.taiymeFeatures,
-		icon: 'ti ti-settings',
+		icon: 'ti ti-settings-plus',
 		to: '/tms/features',
 	});
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 53a88fff57d7..e057b0b97c27 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -35,6 +35,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkA :class="$style.item" :activeClass="$style.active" to="/settings">
 			<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
 		</MkA>
+		<MkA :class="$style.item" :activeClass="$style.active" to="/tms/features">
+			<i :class="$style.itemIcon" class="ti ti-settings-plus ti-fw"></i><span :class="$style.itemText">{{ i18n.ts._tms.taiymeFeatures }}</span>
+		</MkA>
 	</div>
 	<div :class="$style.bottom">
 		<button class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 26362eea436b..646b89eed3a9 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -45,6 +45,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active" to="/settings">
 				<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
 			</MkA>
+			<MkA v-tooltip.noDelay.right="i18n.ts._tms.taiymeFeatures" :class="$style.item" :activeClass="$style.active" to="/tms/features">
+				<i :class="$style.itemIcon" class="ti ti-settings-plus ti-fw"></i><span :class="$style.itemText">{{ i18n.ts._tms.taiymeFeatures }}</span>
+			</MkA>
 		</div>
 		<div :class="$style.bottom">
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post">
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index f4633314ae85..8491274fdae3 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -33,6 +33,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
 				<i class="ti ti-settings ti-fw"></i>
 			</MkA>
+			<MkA v-click-anime v-tooltip="i18n.ts._tms.taiymeFeatures" class="item" activeClass="active" to="/tms/features" :behavior="settingsWindowed ? 'window' : null">
+				<i class="ti ti-settings-plus ti-fw"></i>
+			</MkA>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
 			</button>
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 6ba928363f92..10375cfe710b 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -38,6 +38,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkA v-click-anime class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
 		<i class="ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 	</MkA>
+	<MkA v-click-anime class="item" activeClass="active" to="/tms/features" :behavior="settingsWindowed ? 'window' : null">
+		<i class="ti ti-settings-plus ti-fw"></i><span class="text">{{ i18n.ts._tms.taiymeFeatures }}</span>
+	</MkA>
 	<div class="divider"></div>
 	<div class="about">
 		<button v-click-anime class="item _button" @click="openInstanceMenu">

From 4fdb0b3714789837b28b81ad0d299252438d79ac Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 12 Nov 2024 12:21:04 +0900
Subject: [PATCH 11/11] remove fallback for "overflow: clip"

---
 packages/frontend/src/components/MkAchievements.vue            | 1 -
 packages/frontend/src/components/MkAutocomplete.vue            | 2 --
 packages/frontend/src/components/MkButton.vue                  | 2 --
 packages/frontend/src/components/MkContainer.vue               | 3 ---
 packages/frontend/src/components/MkDialog.vue                  | 1 -
 packages/frontend/src/components/MkDriveFileThumbnail.vue      | 1 -
 packages/frontend/src/components/MkFoldableSection.vue         | 1 -
 packages/frontend/src/components/MkFolder.vue                  | 1 -
 packages/frontend/src/components/MkMarquee.vue                 | 1 -
 packages/frontend/src/components/MkMediaAudio.vue              | 1 -
 packages/frontend/src/components/MkMediaBanner.vue             | 3 ---
 packages/frontend/src/components/MkMediaImage.vue              | 1 -
 packages/frontend/src/components/MkMediaVideo.vue              | 1 -
 packages/frontend/src/components/MkModal.vue                   | 1 -
 packages/frontend/src/components/MkNote.vue                    | 3 ---
 packages/frontend/src/components/MkNoteDetailed.vue            | 2 --
 packages/frontend/src/components/MkNotePreview.vue             | 2 --
 packages/frontend/src/components/MkNotification.vue            | 1 -
 packages/frontend/src/components/MkOmit.vue                    | 1 -
 packages/frontend/src/components/MkPagePreview.vue             | 1 -
 packages/frontend/src/components/MkPoll.vue                    | 1 -
 packages/frontend/src/components/MkPostForm.vue                | 2 --
 packages/frontend/src/components/MkPullToRefresh.vue           | 2 --
 packages/frontend/src/components/MkRange.vue                   | 1 -
 packages/frontend/src/components/MkRemoteCaution.vue           | 1 -
 packages/frontend/src/components/MkSubNoteContent.vue          | 1 -
 packages/frontend/src/components/MkTagCloud.vue                | 1 -
 packages/frontend/src/components/MkToast.vue                   | 1 -
 packages/frontend/src/components/MkUrlPreview.vue              | 1 -
 packages/frontend/src/components/MkUserPopup.vue               | 1 -
 packages/frontend/src/components/MkVisitorDashboard.vue        | 2 --
 packages/frontend/src/components/MkWindow.vue                  | 1 -
 packages/frontend/src/components/TmsFormula.core.vue           | 1 -
 packages/frontend/src/components/TmsInstanceTicker.vue         | 1 -
 packages/frontend/src/components/global/MkAvatar.vue           | 1 -
 packages/frontend/src/components/global/MkPageHeader.vue       | 2 --
 packages/frontend/src/pages/admin/index.vue                    | 1 -
 packages/frontend/src/pages/admin/modlog.ModLog.vue            | 1 -
 packages/frontend/src/pages/antenna-timeline.vue               | 1 -
 .../src/pages/settings/avatar-decoration.decoration.vue        | 1 -
 packages/frontend/src/pages/settings/drive-cleaner.vue         | 1 -
 packages/frontend/src/pages/settings/drive.vue                 | 1 -
 packages/frontend/src/pages/settings/index.vue                 | 1 -
 packages/frontend/src/pages/settings/profile.vue               | 1 -
 packages/frontend/src/pages/settings/theme.vue                 | 1 -
 packages/frontend/src/pages/signup-complete.vue                | 1 -
 packages/frontend/src/pages/timeline.vue                       | 1 -
 packages/frontend/src/pages/user-list-timeline.vue             | 1 -
 packages/frontend/src/pages/user/home.vue                      | 3 ---
 packages/frontend/src/pages/user/index.files.vue               | 1 -
 packages/frontend/src/pages/user/index.timeline.vue            | 1 -
 packages/frontend/src/pages/welcome.entrance.a.vue             | 1 -
 packages/frontend/src/pages/welcome.setup.vue                  | 1 -
 packages/frontend/src/style.scss                               | 1 -
 packages/frontend/src/ui/_common_/announcements.vue            | 2 --
 packages/frontend/src/ui/_common_/navbar.vue                   | 1 -
 packages/frontend/src/ui/_common_/notification.vue             | 1 -
 packages/frontend/src/ui/_common_/statusbars.vue               | 1 -
 packages/frontend/src/ui/classic.vue                           | 1 -
 packages/frontend/src/ui/deck.vue                              | 3 ---
 packages/frontend/src/ui/deck/column.vue                       | 2 --
 packages/frontend/src/ui/universal.vue                         | 3 ---
 packages/frontend/src/widgets/WidgetInstanceInfo.vue           | 1 -
 packages/frontend/src/widgets/WidgetProfile.vue                | 1 -
 64 files changed, 86 deletions(-)

diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
index 306cd4f977bb..9c8ba98cc78d 100644
--- a/packages/frontend/src/components/MkAchievements.vue
+++ b/packages/frontend/src/components/MkAchievements.vue
@@ -130,7 +130,6 @@ onMounted(() => {
 	user-select: none;
 	filter: drop-shadow(0px 2px 2px #00000044);
 	box-shadow: 0 1px 0px #ffffff88 inset;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index f5ba5755a9ff..e12fad16361f 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -382,7 +382,6 @@ onBeforeUnmount(() => {
 	position: fixed;
 	max-width: 100%;
 	margin-top: calc(1em + 8px);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	transition: top 0.1s ease, left 0.1s ease;
 }
@@ -402,7 +401,6 @@ onBeforeUnmount(() => {
 	align-items: center;
 	padding: 4px 12px;
 	white-space: nowrap;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	font-size: 0.9em;
 	cursor: default;
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 6da65f5c6cc2..2b204332f4dd 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -131,7 +131,6 @@ function onMousedown(evt: MouseEvent): void {
 	text-decoration: none;
 	background: var(--MI_THEME-buttonBg);
 	border-radius: 5px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
@@ -274,7 +273,6 @@ function onMousedown(evt: MouseEvent): void {
 	width: 100%;
 	height: 100%;
 	border-radius: 6px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	pointer-events: none;
 }
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 69d2200bc349..fcf05f08cbe0 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -135,7 +135,6 @@ onUnmounted(() => {
 <style lang="scss" module>
 .transition_toggle_enterActive,
 .transition_toggle_leaveActive {
-	overflow-y: hidden; // fallback (overflow-y: clip)
 	overflow-y: clip;
 	transition: opacity 0.5s, height 0.5s !important;
 }
@@ -146,7 +145,6 @@ onUnmounted(() => {
 
 .root {
 	position: relative;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 
@@ -219,7 +217,6 @@ onUnmounted(() => {
 	position: relative;
 	min-height: 64px; // .showMoreFade
 	max-height: var(--maxHeight);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index c8a0a2c9c627..d13ab30a578f 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -245,7 +245,6 @@ const onInputKeydown = filterKeyboardNonComposing(evt => {
 	margin: 16px auto 0 auto;
 	box-sizing: border-box;
 	max-width: 320px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	border: 1px solid var(--MI_THEME-divider);
 	border-radius: 8px;
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 80f1df838c36..3410a915c300 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -71,7 +71,6 @@ const isThumbnailAvailable = computed(() => {
 	display: flex;
 	background: var(--MI_THEME-panel);
 	border-radius: 8px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index 8e09fa84bd54..5a56d4d03d6a 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -90,7 +90,6 @@ onMounted(() => {
 
 <style lang="scss" module>
 .folderToggleEnterActive, .folderToggleLeaveActive {
-	overflow-y: hidden; // fallback (overflow-y: clip)
 	overflow-y: clip;
 	transition: opacity 0.3s, height 0.3s !important;
 }
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 2f2ba0b4be1b..1d8d73d7bf07 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -122,7 +122,6 @@ onMounted(() => {
 <style lang="scss" module>
 .transition_toggle_enterActive,
 .transition_toggle_leaveActive {
-	overflow-y: hidden; // fallback (overflow-y: clip)
 	overflow-y: clip;
 	transition: opacity 0.3s, height 0.3s, transform 0.3s !important;
 }
diff --git a/packages/frontend/src/components/MkMarquee.vue b/packages/frontend/src/components/MkMarquee.vue
index 659749fc1a2b..dc33f082fac4 100644
--- a/packages/frontend/src/components/MkMarquee.vue
+++ b/packages/frontend/src/components/MkMarquee.vue
@@ -83,7 +83,6 @@ export default {
 
 <style lang="scss" module>
 .wrap {
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	animation-play-state: running;
 
diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 89e41ff7bbde..52ea658be418 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -394,7 +394,6 @@ onDeactivated(() => {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	border: 0.5px solid var(--MI_THEME-divider);
 	border-radius: var(--mediaList-radius, 8px);
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index f295608e4b06..4f89c3e226c1 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -120,7 +120,6 @@ const showMediaMenu = (ev: MouseEvent) => {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	border: 0.5px solid var(--MI_THEME-divider);
 	border-radius: var(--mediaList-radius, 8px);
@@ -182,7 +181,6 @@ const showMediaMenu = (ev: MouseEvent) => {
 .downloadContainer {
 	display: flex;
 	align-items: stretch;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
@@ -192,7 +190,6 @@ const showMediaMenu = (ev: MouseEvent) => {
 	align-items: center;
 	gap: 8px;
 	padding: 10px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 
 	&:hover {
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 5a687d2fd3e4..2e2f015e72f3 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -202,7 +202,6 @@ const showImageMenu = (ev: MouseEvent) => {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	border-radius: var(--mediaList-radius, 8px);
 
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index bc411547d87d..caa74ac829af 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -520,7 +520,6 @@ onDeactivated(() => {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	border-radius: var(--mediaList-radius, 8px);
 
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 7e71a761dc48..5f9dacb1deb3 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -493,7 +493,6 @@ defineExpose({
 		left: 0;
 		width: 100%;
 		height: 100%;
-		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 
 		> .content {
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 38fcafbbd470..34afe57462f6 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -616,7 +616,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	font-size: 1.05em;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 
@@ -819,7 +818,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: relative;
 	min-height: 64px; // .showMoreFade
 	max-height: 9em;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
@@ -893,7 +891,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 	padding: 16px;
 	border: dashed 1px var(--MI_THEME-renote);
 	border-radius: 8px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 59b2cf404022..3367cbf7e0e0 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -558,7 +558,6 @@ function loadConversation() {
 .root {
 	position: relative;
 	transition: box-shadow 0.1s ease;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 
@@ -737,7 +736,6 @@ function loadConversation() {
 	padding: 16px;
 	border: dashed 1px var(--MI_THEME-renote);
 	border-radius: 8px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 3810d76ef335..e0ea9621376b 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -48,7 +48,6 @@ const props = defineProps<{
 	display: flex;
 	margin: 0;
 	padding: 0;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	font-size: 0.95em;
 }
@@ -80,7 +79,6 @@ const props = defineProps<{
 	margin-bottom: 2px;
 	font-weight: bold;
 	width: 100%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	text-overflow: ellipsis;
 }
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 76e419f72a68..735b0903076e 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -383,7 +383,6 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 .text {
 	display: flex;
 	width: 100%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
index c751dab3dbaf..268575ac5749 100644
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@@ -75,7 +75,6 @@ onUnmounted(() => {
 	position: relative;
 	min-height: 64px; // .showMoreFade
 	max-height: v-bind("props.maxHeight + 'px'");
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index 885fd43768aa..6871ab014a7e 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -139,7 +139,6 @@ const props = defineProps<{
 
 		> .thumbnail {
 			height: 80px;
-			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 		}
 
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index b325b3d1b302..82a2167dd7c0 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -117,7 +117,6 @@ const vote = async (id) => {
 	// border: solid 0.5px var(--MI_THEME-divider);
 	background: var(--MI_THEME-accentedBg);
 	border-radius: 4px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	cursor: pointer;
 }
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 1ba671ebe36a..6ecf66282501 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1119,7 +1119,6 @@ defineExpose({
 	align-items: center;
 	margin-left: auto;
 	gap: 4px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	padding-left: 4px;
 }
@@ -1202,7 +1201,6 @@ defineExpose({
 }
 
 .visibility {
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	text-overflow: ellipsis;
 	white-space: nowrap;
diff --git a/packages/frontend/src/components/MkPullToRefresh.vue b/packages/frontend/src/components/MkPullToRefresh.vue
index 67f89b19b619..aa5cf41d1eea 100644
--- a/packages/frontend/src/components/MkPullToRefresh.vue
+++ b/packages/frontend/src/components/MkPullToRefresh.vue
@@ -242,7 +242,6 @@ defineExpose({
 <style lang="scss" module>
 .frame {
 	position: relative;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 
 	width: 100%;
@@ -282,7 +281,6 @@ defineExpose({
 }
 
 .slotClip {
-	overflow-y: hidden; // fallback (overflow-y: clip)
 	overflow-y: clip;
 }
 </style>
diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue
index a1818c8cae23..ad921c9d3f05 100644
--- a/packages/frontend/src/components/MkRange.vue
+++ b/packages/frontend/src/components/MkRange.vue
@@ -243,7 +243,6 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 				height: 3px;
 				background: rgba(0, 0, 0, 0.1);
 				border-radius: 999px;
-				overflow: hidden; // fallback (overflow: clip)
 				overflow: clip;
 
 				> .highlight {
diff --git a/packages/frontend/src/components/MkRemoteCaution.vue b/packages/frontend/src/components/MkRemoteCaution.vue
index 8b27758eb798..d6dc6760d059 100644
--- a/packages/frontend/src/components/MkRemoteCaution.vue
+++ b/packages/frontend/src/components/MkRemoteCaution.vue
@@ -22,7 +22,6 @@ const props = defineProps<{
 	background: var(--MI_THEME-infoWarnBg);
 	color: var(--MI_THEME-infoWarnFg);
 	border-radius: var(--MI-radius);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 9932e08c91c8..6a3728ddc38c 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -55,7 +55,6 @@ const collapsed = ref(isLong);
 	position: relative;
 	min-height: 64px; // .showMoreFade
 	max-height: 9em;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkTagCloud.vue b/packages/frontend/src/components/MkTagCloud.vue
index de0050fb3366..65e8ff8cdd92 100644
--- a/packages/frontend/src/components/MkTagCloud.vue
+++ b/packages/frontend/src/components/MkTagCloud.vue
@@ -78,7 +78,6 @@ defineExpose({
 <style lang="scss" module>
 .root {
 	position: relative;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	display: grid;
 	place-items: center;
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index efa8ab34284c..c72dc5d67309 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -67,7 +67,6 @@ onMounted(() => {
 	width: min-content;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 	border-radius: 8px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	text-align: center;
 	pointer-events: none;
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index e24464464fbc..9b5ab65a4fa3 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -242,7 +242,6 @@ onUnmounted(() => {
 	font-size: 14px;
 	box-shadow: 0 0 0 1px var(--MI_THEME-divider);
 	border-radius: 8px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 
 	&:hover {
diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index 1cc076874946..740202f28bf2 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -129,7 +129,6 @@ onMounted(() => {
 .root {
 	position: absolute;
 	width: 300px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	transform-origin: center top;
 }
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index c2b18df13f6c..378040457d23 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -231,7 +231,6 @@ function showMenu(ev: MouseEvent) {
 }
 
 .statsItem {
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	padding: 16px 20px;
 }
@@ -248,7 +247,6 @@ function showMenu(ev: MouseEvent) {
 }
 
 .tl {
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index 41523026c390..b44befbb2a83 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -496,7 +496,6 @@ defineExpose({
 }
 
 .body {
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/components/TmsFormula.core.vue b/packages/frontend/src/components/TmsFormula.core.vue
index ab9f73c7a930..0547bf8c5f9b 100644
--- a/packages/frontend/src/components/TmsFormula.core.vue
+++ b/packages/frontend/src/components/TmsFormula.core.vue
@@ -48,7 +48,6 @@ const rawHtml = computed(() => {
 	display: block;
 	margin: auto;
 	width: fit-content;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 </style>
diff --git a/packages/frontend/src/components/TmsInstanceTicker.vue b/packages/frontend/src/components/TmsInstanceTicker.vue
index 41ade1fc464c..c91afe3a846d 100644
--- a/packages/frontend/src/components/TmsInstanceTicker.vue
+++ b/packages/frontend/src/components/TmsInstanceTicker.vue
@@ -39,7 +39,6 @@ const tickerStateRef = computed(() => getTickerState(props));
 <style lang="scss" module>
 //#region 共通
 .root {
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	display: block;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 83c76069aea4..35c07bc80ca3 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -169,7 +169,6 @@ watch(() => props.user.avatarBlurhash, () => {
 	top: 0;
 	border-radius: 100%;
 	z-index: 1;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	object-fit: cover;
 	width: 100%;
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index bbf62f812acb..fd421ec9a8bc 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -252,7 +252,6 @@ onUnmounted(() => {
 	display: flex;
 	align-items: center;
 	max-width: min(30vw, 400px);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	white-space: nowrap;
 	text-align: left;
@@ -264,7 +263,6 @@ onUnmounted(() => {
 .titleAvatarContainer {
 	$size: 32px;
 	contain: strict;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	width: $size;
 	height: $size;
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 54ab918b389d..d32e2832ef9b 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -366,7 +366,6 @@ function adminLookup(ev: MouseEvent) {
 
 		@supports (height: 100cqh) {
 			height: 100cqh;
-			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 			contain: strict;
 		}
diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index ba501a60212a..1e144394fbaf 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -201,7 +201,6 @@ const props = defineProps<{
 	background: #fff;
 	color: #000;
 	border-radius: 6px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 92195af9ae90..b894cdd4619f 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -117,7 +117,6 @@ definePageMetadata(() => ({
 .tl {
 	background: var(--MI_THEME-bg);
 	border-radius: var(--MI-radius);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 </style>
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
index 65ebc66998cf..f72a0b938312 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
@@ -47,7 +47,6 @@ const emit = defineEmits<{
 	border-radius: 8px;
 	text-align: center;
 	font-size: 90%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 }
diff --git a/packages/frontend/src/pages/settings/drive-cleaner.vue b/packages/frontend/src/pages/settings/drive-cleaner.vue
index 510c565835e4..67f6e181125d 100644
--- a/packages/frontend/src/pages/settings/drive-cleaner.vue
+++ b/packages/frontend/src/pages/settings/drive-cleaner.vue
@@ -160,7 +160,6 @@ definePageMetadata(() => ({
 	margin-top: 8px;
 	height: 12px;
 	background: rgba(0, 0, 0, 0.1);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	border-radius: 999px;
 }
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index 4ae295c10f42..5b41a2528288 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -164,7 +164,6 @@ definePageMetadata(() => ({
 	height: 10px;
 	background: rgba(0, 0, 0, 0.1);
 	border-radius: 999px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 73694c46369c..a982080cfd5e 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -295,7 +295,6 @@ const menuDef = computed<ISuperMenuDefinitions>(() => [{
 
 		@supports (height: 100cqh) {
 			height: 100cqh;
-			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 			contain: strict;
 		}
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 4c916bf526db..283c0b5c4773 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -297,7 +297,6 @@ definePageMetadata(() => ({
 	background-size: cover;
 	background-position: center;
 	border-bottom: solid 1px var(--MI_THEME-divider);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 4ecdbeacc6b2..1e9700b99725 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -198,7 +198,6 @@ definePageMetadata(() => ({
 		> .toggleWrapper {
 			display: inline-block;
 			text-align: left;
-			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 			padding: 0 100px;
 			vertical-align: bottom;
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index 23342c488743..14fb96d4f18a 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -73,7 +73,6 @@ place-content: center;
 	z-index: 10;
 	border-radius: var(--MI-radius);
 	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	max-width: 500px;
 }
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 11cc8b0a2dbb..5d2d5703fe9c 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -368,7 +368,6 @@ definePageMetadata(() => ({
 .tl {
 	background: var(--MI_THEME-bg);
 	border-radius: var(--MI-radius);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 </style>
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index 0eeeed3cf871..84de66fad8af 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -99,7 +99,6 @@ definePageMetadata(() => ({
 .tl {
 	background: var(--MI_THEME-bg);
 	border-radius: var(--MI-radius);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 </style>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 2e9b54d38ea3..a70639a1f42f 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -235,13 +235,11 @@ onMounted(() => {
 
 			> .main {
 				position: relative;
-				overflow: hidden; // fallback (overflow: clip)
 				overflow: clip;
 
 				> .banner-container {
 					position: relative;
 					height: 250px;
-					overflow: hidden; // fallback (overflow: clip)
 					overflow: clip;
 
 					> .banner {
@@ -564,7 +562,6 @@ onMounted(() => {
 .tl {
 	background: var(--MI_THEME-bg);
 	border-radius: var(--MI-radius);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index da1abef245b0..1cd7cbcd3fa1 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -96,7 +96,6 @@ onMounted(() => {
 	position: relative;
 	height: 128px;
 	border-radius: 6px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 8daab1e66745..49d015a530db 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -58,7 +58,6 @@ const pagination = computed(() => tab.value === 'featured' ? {
 .tl {
 	background: var(--MI_THEME-bg);
 	border-radius: var(--MI-radius);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 </style>
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index dde21f7bec2b..f0e4a852c971 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -168,7 +168,6 @@ misskeyApiGet('federation/instances', {
 		-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 		backdrop-filter: var(--MI-blur, blur(15px));
 		border-radius: 999px;
-		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 		width: 800px;
 		padding: 8px 0;
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index d1cc68dd090e..223cc1c26466 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -101,7 +101,6 @@ function submit() {
 	z-index: 10;
 	border-radius: var(--MI-radius);
 	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	max-width: 500px;
 }
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index eece78a6cb48..f5d285ccc3de 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -304,7 +304,6 @@ rt {
 ._panel {
 	background: var(--MI_THEME-panel);
 	border-radius: var(--MI-radius);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/ui/_common_/announcements.vue b/packages/frontend/src/ui/_common_/announcements.vue
index c1f927233562..d153dc872605 100644
--- a/packages/frontend/src/ui/_common_/announcements.vue
+++ b/packages/frontend/src/ui/_common_/announcements.vue
@@ -42,7 +42,6 @@ import { $i } from '@/account.js';
 	width: 100%;
 	line-height: var(--height);
 	height: var(--height);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: strict;
 	background: var(--MI_THEME-accent);
@@ -74,7 +73,6 @@ import { $i } from '@/account.js';
 .body {
 	min-width: 0;
 	flex: 1;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	white-space: nowrap;
 	text-overflow: ellipsis;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 646b89eed3a9..faaf400195e0 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -123,7 +123,6 @@ function more(ev: MouseEvent) {
 	height: 100dvh;
 	box-sizing: border-box;
 	overflow: auto;
-	overflow-x: hidden; // fallback (overflow-x: clip)
 	overflow-x: clip;
 	overscroll-behavior: contain;
 	background: var(--MI_THEME-navBg);
diff --git a/packages/frontend/src/ui/_common_/notification.vue b/packages/frontend/src/ui/_common_/notification.vue
index 8e54c97a594c..4e338a28f228 100644
--- a/packages/frontend/src/ui/_common_/notification.vue
+++ b/packages/frontend/src/ui/_common_/notification.vue
@@ -23,7 +23,6 @@ const props = defineProps<{
 .root {
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 	border-radius: 8px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 }
diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue
index ed1edc707130..5f9a9380172a 100644
--- a/packages/frontend/src/ui/_common_/statusbars.vue
+++ b/packages/frontend/src/ui/_common_/statusbars.vue
@@ -45,7 +45,6 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 	width: 100%;
 	line-height: var(--height);
 	height: var(--height);
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: strict;
 
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 73613ec62e9a..86030613523c 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -255,7 +255,6 @@ onMounted(() => {
 			border-left: solid 1px var(--MI_THEME-divider);
 			border-right: solid 1px var(--MI_THEME-divider);
 			border-radius: 0;
-			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 			--MI-margin: 12px;
 		}
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 98dfe1e3b311..417e20bbe993 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -265,7 +265,6 @@ html,
 body {
 	width: 100%;
 	height: 100%;
-	overflow: hidden; /* fallback (overflow: clip) */
 	overflow: clip;
 	position: fixed;
 	top: 0;
@@ -276,7 +275,6 @@ body {
 #misskey_app {
 	width: 100%;
 	height: 100%;
-	overflow: hidden; /* fallback (overflow: clip) */
 	overflow: clip;
 	position: absolute;
 	top: 0;
@@ -335,7 +333,6 @@ body {
 	flex: 1;
 	display: flex;
 	overflow-x: auto;
-	overflow-y: hidden; // fallback (overflow-y: clip)
 	overflow-y: clip;
 	overscroll-behavior: contain;
 	background: var(--MI_THEME-deckBg);
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 95d060f81512..f1613505e1db 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -285,7 +285,6 @@ function onDrop(ev) {
 	--deckColumnHeaderHeight: 38px;
 
 	height: 100%;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: strict;
 	border-radius: 10px;
@@ -438,7 +437,6 @@ function onDrop(ev) {
 .body {
 	height: calc(100% - var(--deckColumnHeaderHeight));
 	overflow-y: auto;
-	overflow-x: hidden; // fallback (overflow-x: clip)
 	overflow-x: clip;
 	overscroll-behavior-y: contain;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 014cddd07aca..ba451c345f98 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -247,7 +247,6 @@ html,
 body {
 	width: 100%;
 	height: 100%;
-	overflow: hidden; /* fallback (overflow: clip) */
 	overflow: clip;
 	position: fixed;
 	top: 0;
@@ -258,7 +257,6 @@ body {
 #misskey_app {
 	width: 100%;
 	height: 100%;
-	overflow: hidden; /* fallback (overflow: clip) */
 	overflow: clip;
 	position: absolute;
 	top: 0;
@@ -316,7 +314,6 @@ $widgets-hide-threshold: 1090px;
 
 .root {
 	height: 100dvh;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: strict;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index 66b67bb6fbf0..bc88ae72339d 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -80,7 +80,6 @@ defineExpose<WidgetComponentExpose>({
 
 .body {
 	text-overflow: ellipsis;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	margin-left: -10px;
 	padding: 10px;
diff --git a/packages/frontend/src/widgets/WidgetProfile.vue b/packages/frontend/src/widgets/WidgetProfile.vue
index 86997984a244..ae39098305b3 100644
--- a/packages/frontend/src/widgets/WidgetProfile.vue
+++ b/packages/frontend/src/widgets/WidgetProfile.vue
@@ -81,7 +81,6 @@ defineExpose<WidgetComponentExpose>({
 
 .body {
 	text-overflow: ellipsis;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	margin-left: -10px;
 	padding: 10px;