From ea020e9f7c594d791073672200da0470d06a0b77 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Sat, 20 Jan 2024 03:04:08 +0900
Subject: [PATCH] refactor (client): organize CSS properties & improve RTL
 layout support

Co-authored-by: sup39 <dev@sup39.dev>
---
 .../client/src/components/MkAnnouncement.vue  |  5 ++-
 .../client/src/components/MkAutocomplete.vue  | 20 ++++++++---
 .../src/components/MkChannelFollowButton.vue  |  5 ++-
 .../client/src/components/MkChatPreview.vue   | 17 +++++++---
 packages/client/src/components/MkDialog.vue   |  4 +--
 packages/client/src/components/MkDonation.vue |  7 ++--
 .../client/src/components/MkDrive.file.vue    |  4 +--
 .../client/src/components/MkDrive.folder.vue  |  2 +-
 .../client/src/components/MkEmojiPicker.vue   |  2 +-
 packages/client/src/components/MkFolder.vue   | 10 ++++--
 .../client/src/components/MkFollowButton.vue  |  5 ++-
 .../client/src/components/MkInstanceStats.vue | 15 ++++++---
 packages/client/src/components/MkKeyValue.vue |  7 ++--
 .../client/src/components/MkLaunchPad.vue     |  2 +-
 .../src/components/MkManyAnnouncements.vue    |  2 +-
 .../client/src/components/MkMediaCaption.vue  |  2 +-
 packages/client/src/components/MkMention.vue  | 10 ++++--
 packages/client/src/components/MkMenu.vue     |  2 +-
 packages/client/src/components/MkNote.vue     | 12 +++++--
 .../client/src/components/MkNoteDetailed.vue  |  2 +-
 .../client/src/components/MkNoteHeader.vue    | 15 +++++++--
 .../client/src/components/MkNotePreview.vue   | 15 +++++++--
 .../client/src/components/MkNoteSimple.vue    | 15 +++++++--
 packages/client/src/components/MkNoteSub.vue  | 15 +++++++--
 .../client/src/components/MkPollEditor.vue    |  4 +--
 packages/client/src/components/MkPostForm.vue | 33 ++++++++++++++-----
 .../src/components/MkPostFormDialog.vue       |  2 +-
 .../components/MkReactionsViewer.reaction.vue |  5 ++-
 .../client/src/components/MkSearchBox.vue     |  2 +-
 packages/client/src/components/MkSignin.vue   |  2 +-
 .../src/components/MkSubNoteContent.vue       |  4 +--
 .../client/src/components/MkSuperMenu.vue     | 12 +++++--
 packages/client/src/components/MkUpdated.vue  |  2 +-
 .../client/src/components/form/checkbox.vue   |  2 +-
 .../client/src/components/form/folder.vue     |  2 +-
 packages/client/src/components/form/input.vue |  6 ++--
 .../client/src/components/form/radios.vue     |  4 +--
 packages/client/src/components/form/range.vue |  4 +--
 .../client/src/components/form/section.vue    |  2 +-
 .../client/src/components/form/select.vue     |  4 +--
 packages/client/src/components/form/slot.vue  |  4 +--
 .../client/src/components/form/switch.vue     |  2 +-
 .../client/src/components/form/textarea.vue   |  6 ++--
 .../client/src/components/global/MkError.vue  |  2 +-
 .../src/components/page/page.section.vue      |  6 ++--
 packages/client/src/pages/_error_.vue         |  2 +-
 packages/client/src/pages/about-firefish.vue  |  2 +-
 packages/client/src/pages/about.emojis.vue    |  7 ++--
 packages/client/src/pages/about.vue           |  2 +-
 packages/client/src/pages/admin/emojis.vue    | 10 ++++--
 .../client/src/pages/admin/overview.queue.vue |  2 +-
 packages/client/src/pages/emojis.emoji.vue    |  5 ++-
 packages/client/src/pages/follow-requests.vue |  5 ++-
 packages/client/src/pages/gallery/post.vue    |  9 +++--
 packages/client/src/pages/instance-info.vue   |  7 ++--
 packages/client/src/pages/messaging/index.vue |  2 +-
 .../pages/messaging/messaging-room.form.vue   |  2 +-
 .../messaging/messaging-room.message.vue      |  2 +-
 .../src/pages/messaging/messaging-room.vue    |  2 +-
 packages/client/src/pages/my-groups/index.vue |  2 +-
 packages/client/src/pages/no-graze.vue        |  2 +-
 .../page-editor/els/page-editor.el.button.vue |  2 +-
 .../els/page-editor.el.counter.vue            |  2 +-
 .../page-editor/els/page-editor.el.if.vue     |  2 +-
 .../els/page-editor.el.number-input.vue       |  2 +-
 .../page-editor/els/page-editor.el.switch.vue |  2 +-
 .../els/page-editor.el.text-input.vue         |  2 +-
 .../page-editor/page-editor.container.vue     |  4 +--
 .../page-editor/page-editor.script-block.vue  |  2 +-
 .../src/pages/page-editor/page-editor.vue     |  6 ++--
 packages/client/src/pages/page.vue            |  7 ++--
 .../client/src/pages/settings/accounts.vue    |  5 ++-
 packages/client/src/pages/settings/apps.vue   |  5 ++-
 packages/client/src/pages/settings/index.vue  |  2 +-
 .../client/src/pages/settings/profile.vue     |  2 +-
 .../client/src/pages/settings/reaction.vue    |  2 +-
 packages/client/src/pages/user-info.vue       |  2 +-
 packages/client/src/pages/user/home.vue       | 17 +++++++---
 .../client/src/pages/welcome.entrance.a.vue   | 17 +++++++---
 .../client/src/pages/welcome.entrance.b.vue   |  2 +-
 .../client/src/pages/welcome.entrance.c.vue   |  2 +-
 .../client/src/pages/welcome.timeline.vue     | 10 ++++--
 packages/client/src/style.scss                |  2 +-
 .../src/ui/_common_/navbar-for-mobile.vue     |  2 +-
 packages/client/src/ui/_common_/navbar.vue    |  4 +--
 packages/client/src/ui/_common_/upload.vue    | 12 +++++--
 packages/client/src/ui/universal.vue          |  2 +-
 packages/client/src/ui/visitor/a.vue          |  2 +-
 packages/client/src/ui/visitor/header.vue     |  5 ++-
 packages/client/src/ui/visitor/kanban.vue     |  4 +--
 packages/client/src/widgets/calendar.vue      |  7 ++--
 packages/client/src/widgets/server-info.vue   |  5 ++-
 92 files changed, 350 insertions(+), 160 deletions(-)

diff --git a/packages/client/src/components/MkAnnouncement.vue b/packages/client/src/components/MkAnnouncement.vue
index 4f26cd8b..4359b31d 100644
--- a/packages/client/src/components/MkAnnouncement.vue
+++ b/packages/client/src/components/MkAnnouncement.vue
@@ -82,6 +82,9 @@ const gotIt = () => {
 }
 
 .gotIt {
-	margin: 1rem 0 1rem 2rem;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	margin-inline-start: 2rem;
+	margin-inline-end: 0;
 }
 </style>
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index 3a97f458..465e433a 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -526,19 +526,28 @@ onBeforeUnmount(() => {
 			min-height: 28px;
 			max-width: 28px;
 			max-height: 28px;
-			margin: 0 8px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 8px;
 			border-radius: 100%;
 		}
 
 		.name {
-			margin: 0 8px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 8px;
 		}
 	}
 
 	> .emojis > li {
 		.emoji {
 			display: inline-block;
-			margin: 0 4px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 4px;
 			width: 24px;
 
 			> img {
@@ -548,7 +557,10 @@ onBeforeUnmount(() => {
 		}
 
 		.alias {
-			margin: 0 0 0 8px;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 8px;
+			margin-inline-end: 0;
 		}
 	}
 
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index b9a20e4b..cd1d1726 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -79,7 +79,10 @@ async function onClick() {
 	background: #fff;
 
 	&.full {
-		padding: 0 8px 0 12px;
+		padding-top: 0;
+		padding-bottom: 0;
+		padding-inline-start: 12px;
+		padding-inline-end: 8px;
 		font-size: 14px;
 	}
 
diff --git a/packages/client/src/components/MkChatPreview.vue b/packages/client/src/components/MkChatPreview.vue
index e705fda4..32001265 100644
--- a/packages/client/src/components/MkChatPreview.vue
+++ b/packages/client/src/components/MkChatPreview.vue
@@ -136,7 +136,10 @@ function isMe(message): boolean {
 			}
 
 			> .time {
-				margin: 0 0 0 auto;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: auto;
+				margin-inline-end: 0;
 			}
 		}
 
@@ -144,7 +147,10 @@ function isMe(message): boolean {
 			float: left;
 			width: 54px;
 			height: 54px;
-			margin: 0 16px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 16px;
 			border-radius: 8px;
 			transition: all 0.1s ease;
 		}
@@ -152,7 +158,7 @@ function isMe(message): boolean {
 		> .body {
 			> .text {
 				display: block;
-				margin: 0 0 0 0;
+				margin: 0;
 				padding: 0;
 				overflow: hidden;
 				overflow-wrap: break-word;
@@ -180,7 +186,10 @@ function isMe(message): boolean {
 				font-size: 0.9em;
 
 				> .avatar {
-					margin: 0 12px 0 0;
+					margin-top: 0;
+					margin-bottom: 0;
+					margin-inline-start: 0;
+					margin-inline-end: 12px;
 				}
 			}
 		}
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index ed920f89..62fb5e47 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -543,7 +543,7 @@ onBeforeUnmount(() => {
 }
 
 .title {
-	margin: 0 0 8px 0;
+	margin: 0 0 8px;
 	font-weight: bold;
 	font-size: 1.1em;
 
@@ -553,7 +553,7 @@ onBeforeUnmount(() => {
 }
 
 .text {
-	margin: 16px 0 0 0;
+	margin: 16px 0 0;
 }
 
 .buttons {
diff --git a/packages/client/src/components/MkDonation.vue b/packages/client/src/components/MkDonation.vue
index 095dd7a1..6b3b9e69 100644
--- a/packages/client/src/components/MkDonation.vue
+++ b/packages/client/src/components/MkDonation.vue
@@ -171,7 +171,10 @@ function openExternal(link) {
 }
 
 .main {
-	padding: 25px 25px 25px 0;
+	padding-top: 25px;
+	padding-bottom: 25px;
+	padding-inline-start: 0;
+	padding-inline-end: 25px;
 	flex: 1;
 }
 
@@ -186,6 +189,6 @@ function openExternal(link) {
 	font-weight: bold;
 }
 .text {
-	margin: 0.7em 0 1em 0;
+	margin: 0.7em 0 1em;
 }
 </style>
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index fce7646e..ff631b12 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -229,7 +229,7 @@ async function deleteFile() {
 <style lang="scss" scoped>
 .ncvczrfv {
 	position: relative;
-	padding: 8px 0 0 0;
+	padding: 8px 0 0;
 	min-height: 180px;
 	border-radius: 8px;
 
@@ -370,7 +370,7 @@ async function deleteFile() {
 
 	> .name {
 		display: block;
-		margin: 4px 0 0 0;
+		margin: 4px 0 0;
 		font-size: 0.8em;
 		text-align: center;
 		word-break: break-all;
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index cf34f6e1..c1158b2a 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -340,7 +340,7 @@ function onContextmenu(ev: MouseEvent) {
 	}
 
 	> .upload {
-		margin: 4px 4px;
+		margin: 4px;
 		font-size: 0.8em;
 		text-align: right;
 		color: var(--desktopDriveFolderFg);
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 4b0d8702..bdc29151 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -627,7 +627,7 @@ defineExpose({
 
 		> .group {
 			&:not(.index) {
-				padding: 4px 0 8px 0;
+				padding: 4px 0 8px;
 				border-top: solid 0.5px var(--divider);
 			}
 
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 88bef2ea..1154b93e 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -156,7 +156,10 @@ export default defineComponent({
 
 		> .title {
 			margin: 0;
-			padding: 12px 16px 12px 0;
+			padding-top: 12px;
+			padding-bottom: 12px;
+			padding-inline-start: 0;
+			padding-inline-end: 16px;
 
 			> i {
 				margin-inline-end: 6px;
@@ -175,7 +178,10 @@ export default defineComponent({
 		}
 
 		> button {
-			padding: 12px 0 12px 16px;
+			padding-top: 12px;
+			padding-bottom: 12px;
+			padding-inline-start: 16px;
+			padding-inline-end: 0;
 		}
 	}
 }
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index c900d91b..d7c6d0d1 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -219,7 +219,10 @@ onBeforeUnmount(() => {
 	&.large {
 		font-size: 16px;
 		height: 38px;
-		padding: 0 12px 0 16px;
+		padding-top: 0;
+		padding-bottom: 0;
+		padding-inline-start: 16px;
+		padding-inline-end: 12px;
 	}
 
 	&:not(.full) {
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index 7aee0478..bbe42613 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -4,7 +4,7 @@
 			<template #header>Active Users</template>
 			<div :class="$style.chart">
 				<div class="selects">
-					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
+					<MkSelect v-model="chartSpan" :class="$style.select">
 						<option value="hour">{{ i18n.ts.perHour }}</option>
 						<option value="day">{{ i18n.ts.perDay }}</option>
 					</MkSelect>
@@ -198,11 +198,18 @@ onMounted(() => {
 	margin-bottom: 16px;
 }
 
-.retention {
-	padding: 16px;
-	margin-bottom: 16px;
+.select {
+	margin-top: 0;
+	margin-bottom: 0;
+	margin-inline-start: 10px;
+	margin-inline-end: 0;
 }
 
+// .retention {
+// 	padding: 16px;
+// 	margin-bottom: 16px;
+// }
+
 .federation {
 	&:global {
 		> .pies {
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index e4d47dd8..9c21f78f 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -45,7 +45,7 @@ const copy_ = () => {
 .alqyeyti {
 	> .key {
 		font-size: 0.85em;
-		padding: 0 0 0.25em 0;
+		padding: 0 0 0.25em;
 		opacity: 0.75;
 	}
 
@@ -55,7 +55,10 @@ const copy_ = () => {
 		> .key {
 			width: 30%;
 			font-size: 1em;
-			padding: 0 8px 0 0;
+			padding-top: 0;
+			padding-bottom: 0;
+			padding-inline-start: 0;
+			padding-inline-end: 8px;
 		}
 
 		> .value {
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index bae84ba1..62256ce6 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -126,7 +126,7 @@ function close() {
 
 	&.asDrawer {
 		width: 100%;
-		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
 		border-radius: 24px;
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
diff --git a/packages/client/src/components/MkManyAnnouncements.vue b/packages/client/src/components/MkManyAnnouncements.vue
index c65cd0a9..cce7d8c0 100644
--- a/packages/client/src/components/MkManyAnnouncements.vue
+++ b/packages/client/src/components/MkManyAnnouncements.vue
@@ -47,6 +47,6 @@ const checkAnnouncements = () => {
 }
 
 .gotIt {
-	margin: 8px 0 0 0;
+	margin: 8px 0 0;
 }
 </style>
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 8cfe1826..10558be1 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -234,7 +234,7 @@ export default defineComponent({
 	margin: auto;
 
 	> header {
-		margin: 0 0 8px 0;
+		margin: 0 0 8px;
 		position: relative;
 
 		> .title {
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index fccfa2f2..2e412f43 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -61,7 +61,10 @@ const isMe =
 .mention {
 	position: relative;
 	display: inline-block;
-	padding: 2px 8px 2px 2px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	padding-inline-start: 2px;
+	padding-inline-end: 8px;
 	margin-block: 2px;
 	border-radius: 999px;
 	max-width: 100%;
@@ -88,7 +91,10 @@ const isMe =
 		width: 1.5em;
 		height: 1.5em;
 		object-fit: cover;
-		margin: 0 0.2em 0 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0.2em;
 		vertical-align: bottom;
 		border-radius: 100%;
 	}
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 33eb677b..f08f22b3 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -515,7 +515,7 @@ onBeforeUnmount(() => {
 	}
 
 	&.asDrawer {
-		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
+		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
 		width: 100%;
 		border-radius: 24px;
 		border-bottom-right-radius: 0;
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 06d5d391..e51a0646 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -730,7 +730,7 @@ defineExpose({
 
 	.note-context {
 		position: relative;
-		padding: 0 32px 0 32px;
+		padding: 0 32px;
 		display: flex;
 		z-index: 1;
 		&:first-child {
@@ -879,7 +879,10 @@ defineExpose({
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
-				margin: 0 14px 0 0;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: 0;
+				margin-inline-end: 14px;
 				width: var(--avatarSize);
 				height: var(--avatarSize);
 				position: relative;
@@ -976,7 +979,10 @@ defineExpose({
 
 					> .count {
 						display: inline;
-						margin: 0 0 0 8px;
+						margin-top: 0;
+						margin-bottom: 0;
+						margin-inline-start: 8px;
+						margin-inline-end: 0;
 						opacity: 0.7;
 					}
 
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index f74121b2..bd5058e6 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -648,7 +648,7 @@ onUnmounted(() => {
 		}
 
 		> :deep(.note-container) {
-			padding: 12px 0 0 0;
+			padding: 12px 0 0;
 			font-size: 1.05rem;
 			> .header > .body {
 				padding-inline-start: 10px;
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index ef6b82b6..1134864e 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -132,7 +132,10 @@ function openServerInfo() {
 		.name {
 			// flex: 1 1 0px;
 			display: inline;
-			margin: 0 0.5em 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 0.5em;
 			padding: 0;
 			overflow: hidden;
 			font-weight: bold;
@@ -142,7 +145,10 @@ function openServerInfo() {
 			.mkusername > .is-bot {
 				flex-shrink: 0;
 				align-self: center;
-				margin: 0 0.5em 0 0;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: 0;
+				margin-inline-end: 0.5em;
 				padding: 1px 6px;
 				font-size: 80%;
 				border: solid 0.5px var(--divider);
@@ -156,7 +162,10 @@ function openServerInfo() {
 
 		.username {
 			display: inline;
-			margin: 0 0.5em 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 0.5em;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			align-self: flex-start;
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index 1c0e6954..5b859414 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -37,7 +37,10 @@ defineProps<{
 
 	&.min-width_350px {
 		> .avatar {
-			margin: 0 10px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 10px;
 			width: 44px;
 			height: 44px;
 		}
@@ -45,7 +48,10 @@ defineProps<{
 
 	&.min-width_500px {
 		> .avatar {
-			margin: 0 12px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 12px;
 			width: 48px;
 			height: 48px;
 		}
@@ -54,7 +60,10 @@ defineProps<{
 	> .avatar {
 		flex-shrink: 0;
 		display: block;
-		margin: 0 10px 0 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 10px;
 		width: 40px;
 		height: 40px;
 		border-radius: 8px;
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 70ee62bf..75dc8219 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -31,7 +31,10 @@ defineProps<{
 
 	&.min-width_350px {
 		> .avatar {
-			margin: 0 10px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 10px;
 			width: 44px;
 			height: 44px;
 		}
@@ -39,7 +42,10 @@ defineProps<{
 
 	&.min-width_500px {
 		> .avatar {
-			margin: 0 12px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 12px;
 			width: 48px;
 			height: 48px;
 		}
@@ -48,7 +54,10 @@ defineProps<{
 	> .avatar {
 		flex-shrink: 0;
 		display: block;
-		margin: 0 10px 0 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 10px;
 		width: 40px;
 		height: 40px;
 		border-radius: 8px;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 72ce89e7..7d509052 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -482,13 +482,19 @@ function noteClick(e) {
 	padding: 16px 32px;
 	outline: none;
 	&.children {
-		padding: 10px 0 0 var(--indent);
+		padding-top: 10px;
+		padding-bottom: 0;
+		padding-inline-start: var(--indent);
+		padding-inline-end: 0;
 		padding-inline-start: var(--indent) !important;
 		font-size: 1em;
 		cursor: auto;
 
 		&.max-width_500px {
-			padding: 10px 0 0 8px;
+			padding-top: 10px;
+			padding-bottom: 0;
+			padding-inline-start: 8px;
+			padding-inline-end: 0;
 		}
 	}
 
@@ -581,7 +587,10 @@ function noteClick(e) {
 
 					> .count {
 						display: inline;
-						margin: 0 0 0 8px;
+						margin-top: 0;
+						margin-bottom: 0;
+						margin-inline-start: 8px;
+						margin-inline-end: 0;
 						opacity: 0.7;
 					}
 
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index fa5b4a11..3168b0f5 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -190,7 +190,7 @@ watch(
 	padding: 8px 16px;
 
 	> .caution {
-		margin: 0 0 8px 0;
+		margin: 0 0 8px;
 		font-size: 0.8em;
 		color: #f00;
 
@@ -228,7 +228,7 @@ watch(
 	}
 
 	> section {
-		margin: 16px 0 0 0;
+		margin: 16px 0 0;
 
 		> div {
 			margin: 0 8px;
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 80a5c4a5..058f3cd5 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1284,7 +1284,10 @@ onMounted(() => {
 			> .visibility {
 				height: 34px;
 				width: 34px;
-				margin: 0 0 0 8px;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: 8px;
+				margin-inline-end: 0;
 
 				& + .localOnly {
 					margin-inline-start: 0 !important;
@@ -1296,7 +1299,10 @@ onMounted(() => {
 			}
 
 			> .local-only {
-				margin: 0 0 0 12px;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: 12px;
+				margin-inline-end: 0;
 				opacity: 0.7;
 			}
 
@@ -1308,7 +1314,10 @@ onMounted(() => {
 			> .preview {
 				display: inline-block;
 				padding: 0;
-				margin: 0 8px 0 0;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: 0;
+				margin-inline-end: 8px;
 				font-size: inherit !important;
 				width: 34px;
 				height: 34px;
@@ -1326,7 +1335,10 @@ onMounted(() => {
 			> .submit {
 				display: inline-flex;
 				align-items: center;
-				margin: 16px 16px 16px 0;
+				margin-top: 16px;
+				margin-bottom: 16px;
+				margin-inline-start: 0;
+				margin-inline-end: 16px;
 				padding: 0 12px;
 				line-height: 34px;
 				font-weight: bold;
@@ -1395,7 +1407,10 @@ onMounted(() => {
 
 				> span {
 					margin: 0.3rem;
-					padding: 4px 0 4px 4px;
+					padding-top: 4px;
+					padding-bottom: 4px;
+					padding-inline-start: 4px;
+					padding-inline-end: 0;
 					border-radius: 999px;
 					background: var(--X3);
 
@@ -1407,7 +1422,7 @@ onMounted(() => {
 		}
 
 		> .hasNotSpecifiedMentions {
-			margin: 0 20px 16px 20px;
+			margin: 0 20px 16px;
 		}
 
 		> .cw,
@@ -1458,7 +1473,7 @@ onMounted(() => {
 		}
 
 		> footer {
-			padding: 0 16px 16px 16px;
+			padding: 0 16px 16px;
 
 			> button {
 				display: inline-block;
@@ -1516,7 +1531,7 @@ onMounted(() => {
 			}
 
 			> footer {
-				padding: 0 8px 8px 8px;
+				padding: 0 8px 8px;
 			}
 		}
 	}
@@ -1563,7 +1578,7 @@ onMounted(() => {
 
 	> .ph-lg {
 		vertical-align: -0.125em;
-		margin-left: 12px;
+		margin-inline-start: 12px;
 	}
 }
 
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index bb263a12..f08f0232 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -7,7 +7,7 @@
 	>
 		<MkPostForm
 			ref="form"
-			style="margin: 0 auto auto auto"
+			style="margin: 0 auto auto"
 			v-bind="props"
 			autofocus
 			freeze-after-posted
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 0d07f9c3..abe9971f 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -165,7 +165,10 @@ useTooltip(
 	> .count {
 		font-size: 0.9em;
 		line-height: 32px;
-		margin: 0 0 0 4px;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-start: 4px;
+		margin-inline-end: 0;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkSearchBox.vue b/packages/client/src/components/MkSearchBox.vue
index 6d636b0c..bb61a982 100644
--- a/packages/client/src/components/MkSearchBox.vue
+++ b/packages/client/src/components/MkSearchBox.vue
@@ -240,7 +240,7 @@ onBeforeUnmount(() => {
 }
 
 .title {
-	margin: 0 0 25px 0;
+	margin: 0 0 25px;
 	font-weight: bold;
 	font-size: 1.3em;
 }
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index f849b504..53d3c3d1 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -352,7 +352,7 @@ function showSuspendedDialog() {
 .eppvobhk {
 	> .auth {
 		> .avatar {
-			margin: 0 auto 0 auto;
+			margin: 0 auto;
 			width: 64px;
 			height: 64px;
 			background: var(--accentedBg);
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index ccfd2247..45047632 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -269,7 +269,7 @@ function focusFooter(ev) {
 .reply-icon {
 	display: inline-block;
 	border-radius: 6px;
-	padding: 0.2em 0.2em;
+	padding: 0.2em;
 	margin-inline-end: 0.2em;
 	color: var(--accent);
 	transition: background 0.2s;
@@ -303,7 +303,7 @@ function focusFooter(ev) {
 			.reply-icon {
 				display: inline-block;
 				border-radius: 6px;
-				padding: 0.2em 0.2em;
+				padding: 0.2em;
 				margin-inline-end: 0.2em;
 				color: var(--accent);
 				transition: background 0.2s;
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index f761b619..cbc2d707 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -91,7 +91,10 @@ export default defineComponent({
 				align-items: center;
 				width: 100%;
 				box-sizing: border-box;
-				padding: 10px 16px 10px 8px;
+				padding-top: 10px;
+				padding-bottom: 10px;
+				padding-inline-start: 8px;
+				padding-inline-end: 16px;
 				border-radius: 9px;
 				font-size: 0.9em;
 				margin-bottom: 0.3rem;
@@ -142,7 +145,10 @@ export default defineComponent({
 			> .title {
 				font-size: 1em;
 				opacity: 0.7;
-				margin: 0 0 8px 16px;
+				margin-top: 0;
+				margin-bottom: 8px;
+				margin-inline-start: 16px;
+				margin-inline-end: 0;
 			}
 
 			> .items {
@@ -153,7 +159,7 @@ export default defineComponent({
 
 				> .item {
 					flex-direction: column;
-					padding: 18px 16px 16px 16px;
+					padding: 18px 16px 16px;
 					background: var(--panel);
 					border-radius: 8px;
 					text-align: center;
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
index f6120bba..8fe89654 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -92,7 +92,7 @@ function openReleaseNotes(): void {
 }
 
 .gotIt {
-	margin: 8px 0 0 0;
+	margin: 8px 0 0;
 }
 
 .releaseNotes {
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index ed862e68..97217df7 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -118,7 +118,7 @@ const toggle = () => {
 		}
 
 		> .caption {
-			margin: 8px 0 0 0;
+			margin: 8px 0 0;
 			color: var(--fgTransparentWeak);
 			font-size: 0.85em;
 
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index 40a61d19..b28847a8 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -39,7 +39,7 @@ const opened = ref(props.defaultOpen);
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding: 12px 14px 12px 14px;
+		padding: 12px 14px;
 		background: var(--buttonBg);
 
 		&:hover {
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 7a48c8d4..7c2ff4c4 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -183,7 +183,7 @@ defineExpose({
 	> label {
 		> .label {
 			font-size: 0.85em;
-			padding: 0 0 8px 0;
+			padding: 0 0 8px;
 			user-select: none;
 
 			&:empty {
@@ -193,7 +193,7 @@ defineExpose({
 
 		> .caption {
 			font-size: 0.85em;
-			padding: 8px 0 0 0;
+			padding: 8px 0 0;
 			color: var(--fgTransparentWeak);
 
 			&:empty {
@@ -292,7 +292,7 @@ defineExpose({
 	}
 
 	> .save {
-		margin: 8px 0 0 0;
+		margin: 8px 0 0;
 	}
 }
 </style>
diff --git a/packages/client/src/components/form/radios.vue b/packages/client/src/components/form/radios.vue
index a46fecf1..ca81eda2 100644
--- a/packages/client/src/components/form/radios.vue
+++ b/packages/client/src/components/form/radios.vue
@@ -90,7 +90,7 @@ export default defineComponent({
 	padding: 0;
 	> .label {
 		font-size: 0.85em;
-		padding: 0 0 8px 0;
+		padding: 0 0 8px;
 		user-select: none;
 
 		&:empty {
@@ -106,7 +106,7 @@ export default defineComponent({
 
 	> .caption {
 		font-size: 0.85em;
-		padding: 8px 0 0 0;
+		padding: 8px 0 0;
 		color: var(--fgTransparentWeak);
 
 		&:empty {
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index c7aa7ed7..08b5bec7 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -119,7 +119,7 @@ function tooltipHide() {
 
 	> .label {
 		font-size: 0.85em;
-		padding: 0 0 8px 0;
+		padding: 0 0 8px;
 		user-select: none;
 
 		&:empty {
@@ -129,7 +129,7 @@ function tooltipHide() {
 
 	> .caption {
 		font-size: 0.85em;
-		padding: 8px 0 0 0;
+		padding: 8px 0 0;
 		color: var(--fgTransparentWeak);
 
 		&:empty {
diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue
index c1d858b5..a92420a9 100644
--- a/packages/client/src/components/form/section.vue
+++ b/packages/client/src/components/form/section.vue
@@ -28,7 +28,7 @@
 
 	> .label {
 		font-weight: bold;
-		margin: 1.5em 0 16px 0;
+		margin: 1.5em 0 16px;
 		font-size: 1em;
 
 		&:empty {
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index a933847a..6a0c1701 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -203,7 +203,7 @@ function show(ev: MouseEvent) {
 .vblkjoeq {
 	> .label {
 		font-size: 0.85em;
-		padding: 0 0 8px 0;
+		padding: 0 0 8px;
 		user-select: none;
 
 		&:empty {
@@ -213,7 +213,7 @@ function show(ev: MouseEvent) {
 
 	> .caption {
 		font-size: 0.85em;
-		padding: 8px 0 0 0;
+		padding: 8px 0 0;
 		color: var(--fgTransparentWeak);
 
 		&:empty {
diff --git a/packages/client/src/components/form/slot.vue b/packages/client/src/components/form/slot.vue
index f570fa60..a45e08e1 100644
--- a/packages/client/src/components/form/slot.vue
+++ b/packages/client/src/components/form/slot.vue
@@ -20,7 +20,7 @@ function focus() {
 .adhpbeou {
 	> .label {
 		font-size: 0.85em;
-		padding: 0 0 8px 0;
+		padding: 0 0 8px;
 		user-select: none;
 
 		&:empty {
@@ -30,7 +30,7 @@ function focus() {
 
 	> .caption {
 		font-size: 0.85em;
-		padding: 8px 0 0 0;
+		padding: 8px 0 0;
 		color: var(--fgTransparentWeak);
 
 		&:empty {
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index d8dd038f..e3830521 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -106,7 +106,7 @@ function toggle(x) {
 		}
 
 		> .caption {
-			margin: 8px 0 0 0;
+			margin: 8px 0 0;
 			color: var(--fgTransparentWeak);
 			font-size: 0.85em;
 
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 23197e1d..13d6cde7 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -201,7 +201,7 @@ export default defineComponent({
 	> label {
 		> .label {
 			font-size: 0.85em;
-			padding: 0 0 8px 0;
+			padding: 0 0 8px;
 			user-select: none;
 			&:empty {
 				display: none;
@@ -209,7 +209,7 @@ export default defineComponent({
 		}
 		> .caption {
 			font-size: 0.85em;
-			padding: 8px 0 0 0;
+			padding: 8px 0 0;
 			color: var(--fgTransparentWeak);
 
 			&:empty {
@@ -276,7 +276,7 @@ export default defineComponent({
 	}
 
 	> .save {
-		margin: 8px 0 0 0;
+		margin: 8px 0 0;
 	}
 }
 </style>
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
index 7472542e..80feb1c3 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -30,7 +30,7 @@ import icon from "@/scripts/icon";
 	text-align: center;
 
 	> p {
-		margin: 0 0 8px 0;
+		margin: 0 0 8px;
 	}
 
 	> .button {
diff --git a/packages/client/src/components/page/page.section.vue b/packages/client/src/components/page/page.section.vue
index 8f2ae611..37f647b0 100644
--- a/packages/client/src/components/page/page.section.vue
+++ b/packages/client/src/components/page/page.section.vue
@@ -46,17 +46,17 @@ export default defineComponent({
 
 	> h2 {
 		font-size: 1.35em;
-		margin: 0 0 0.5em 0;
+		margin: 0 0 0.5em;
 	}
 
 	> h3 {
 		font-size: 1em;
-		margin: 0 0 0.5em 0;
+		margin: 0 0 0.5em;
 	}
 
 	> h4 {
 		font-size: 1em;
-		margin: 0 0 0.5em 0;
+		margin: 0 0 0.5em;
 	}
 
 	// > .children {
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index 8d3005f8..90e7d357 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -89,7 +89,7 @@ definePageMetadata({
 	text-align: center;
 
 	> p {
-		margin: 0 0 12px 0;
+		margin: 0 0 12px;
 	}
 
 	> .button {
diff --git a/packages/client/src/pages/about-firefish.vue b/packages/client/src/pages/about-firefish.vue
index 4ae4501a..2848b4fc 100644
--- a/packages/client/src/pages/about-firefish.vue
+++ b/packages/client/src/pages/about-firefish.vue
@@ -314,7 +314,7 @@ definePageMetadata({
 		}
 
 		> .misskey {
-			margin: 0.75em auto 0 auto;
+			margin: 0.75em auto 0;
 			width: max-content;
 		}
 
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index 24bd4cf5..9e38e26a 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -143,7 +143,10 @@ export default defineComponent({
 		> .tags {
 			> .tag {
 				display: inline-block;
-				margin: 8px 8px 0 0;
+				margin-top: 8px;
+				margin-bottom: 0;
+				margin-inline-start: 0;
+				margin-inline-end: 8px;
 				padding: 4px 8px;
 				font-size: 0.9em;
 				background: var(--accentedBg);
@@ -164,7 +167,7 @@ export default defineComponent({
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 			grid-gap: 12px;
-			margin: 0 var(--margin) var(--margin) var(--margin);
+			margin: 0 var(--margin) var(--margin);
 		}
 	}
 }
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 92675b4f..90ea1465 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -325,7 +325,7 @@ function syncSlide(index) {
 
 		> .icon {
 			display: block;
-			margin: 16px auto 0 auto;
+			margin: 16px auto 0;
 			height: 64px;
 		}
 
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index ff4cbc00..b229712f 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -480,7 +480,10 @@ definePageMetadata(
 				}
 
 				> .body {
-					padding: 0 0 0 8px;
+					padding-top: 0;
+					padding-bottom: 0;
+					padding-inline-start: 8px;
+					padding-inline-end: 0;
 					white-space: nowrap;
 					overflow: hidden;
 
@@ -526,7 +529,10 @@ definePageMetadata(
 				}
 
 				> .body {
-					padding: 0 0 0 8px;
+					padding-top: 0;
+					padding-bottom: 0;
+					padding-inline-start: 8px;
+					padding-inline-end: 0;
 					white-space: nowrap;
 					overflow: hidden;
 
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/overview.queue.vue
index bd5da069..6268a387 100644
--- a/packages/client/src/pages/admin/overview.queue.vue
+++ b/packages/client/src/pages/admin/overview.queue.vue
@@ -114,7 +114,7 @@ onUnmounted(() => {
 .root {
 	&:global {
 		> .status {
-			padding: 0 0 16px 0;
+			padding: 0 0 16px;
 		}
 
 		> .charts {
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index bd7e773b..1c733856 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -72,7 +72,10 @@ function menu(ev) {
 	}
 
 	> .body {
-		padding: 0 0 0 8px;
+		padding-top: 0;
+		padding-bottom: 0;
+		padding-inline-start: 8px;
+		padding-inline-end: 0;
 		white-space: nowrap;
 		overflow: hidden;
 
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 0f465c5c..19f7dacb 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -129,7 +129,10 @@ definePageMetadata(
 		> .avatar {
 			display: block;
 			flex-shrink: 0;
-			margin: 0 12px 0 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 12px;
 			width: 42px;
 			height: 42px;
 			border-radius: 8px;
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 37e25e0a..ddf812c3 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -293,7 +293,7 @@ definePageMetadata(
 			display: flex;
 			align-items: center;
 			margin-top: 16px;
-			padding: 16px 0 0 0;
+			padding: 16px 0 0;
 			border-top: solid 0.5px var(--divider);
 
 			> .like {
@@ -326,7 +326,7 @@ definePageMetadata(
 
 		> .user {
 			margin-top: 16px;
-			padding: 16px 0 0 0;
+			padding: 16px 0 0;
 			border-top: solid 0.5px var(--divider);
 			display: flex;
 			align-items: center;
@@ -337,7 +337,10 @@ definePageMetadata(
 			}
 
 			> .name {
-				margin: 0 0 0 12px;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: 12px;
+				margin-inline-end: 0;
 				font-size: 90%;
 			}
 
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index bf4637a2..ef28abc2 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -454,7 +454,10 @@ function syncSlide(index) {
 
 	> .icon {
 		display: block;
-		margin: 0 16px 0 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 16px;
 		height: 64px;
 		border-radius: 8px;
 	}
@@ -467,7 +470,7 @@ function syncSlide(index) {
 .cmhjzshl {
 	> .selects {
 		display: flex;
-		margin: 0 0 16px 0;
+		margin: 0 0 16px;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 8b8eb1a9..d1e64415 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -281,7 +281,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .yweeujhr {
 	> .start {
-		margin: 0 auto var(--margin) auto;
+		margin: 0 auto var(--margin);
 	}
 
 	> .groupsbuttons {
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 7e33ef16..2bfabdb1 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -298,7 +298,7 @@ defineExpose({
 		max-width: 100%;
 		min-height: 80px;
 		margin: 0;
-		padding: 16px 16px 0 16px;
+		padding: 16px 16px 0;
 		resize: none;
 		font-size: 1em;
 		font-family: inherit;
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index d52b8476..4d8512f5 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -242,7 +242,7 @@ function del(): void {
 
 		> footer {
 			display: block;
-			margin: 2px 0 0 0;
+			margin: 2px 0 0;
 			font-size: 0.65em;
 
 			> .read {
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index cf2bea16..86119387 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -444,7 +444,7 @@ XMessage:last-of-type {
 		> .typers {
 			position: absolute;
 			bottom: 100%;
-			padding: 0 8px 0 8px;
+			padding: 0 8px;
 			font-size: 0.9em;
 			color: var(--fgTransparentWeak);
 
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index 1d6d1b9d..4db553fc 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -6,7 +6,7 @@
 		<MkSpacer :content-max="800" :margin-min="20">
 			<MkButton
 				primary
-				style="margin: 0 auto var(--margin) auto"
+				style="margin: 0 auto var(--margin)"
 				@click="create"
 				><i :class="icon('ph-plus')"></i>
 				{{ i18n.ts.createGroup }}</MkButton
diff --git a/packages/client/src/pages/no-graze.vue b/packages/client/src/pages/no-graze.vue
index 5b77f813..e5ba7979 100644
--- a/packages/client/src/pages/no-graze.vue
+++ b/packages/client/src/pages/no-graze.vue
@@ -26,7 +26,7 @@ import icon from "@/scripts/icon";
 	text-align: center;
 
 	> p {
-		margin: 0 0 8px 0;
+		margin: 0 0 8px;
 	}
 
 	> img {
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 049e19e0..722967b4 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -125,6 +125,6 @@ withDefaults(
 
 <style lang="scss" scoped>
 .xfhsjczc {
-	padding: 0 16px 0 16px;
+	padding: 0 16px;
 }
 </style>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index 327b5681..ec32b7d3 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -5,7 +5,7 @@
 			{{ i18n.ts._pages.blocks.counter }}</template
 		>
 
-		<section style="padding: 0 16px 0 16px">
+		<section style="padding: 0 16px">
 			<MkInput v-model="value.name">
 				<template #prefix
 					><i :class="icon('ph-magic-wand')"></i
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index b5a9496a..777f5b58 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -85,6 +85,6 @@ async function add() {
 
 <style lang="scss" scoped>
 .romcojzs {
-	padding: 0 16px 16px 16px;
+	padding: 0 16px 16px;
 }
 </style>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index 2fb3c3ea..5487c8e7 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -5,7 +5,7 @@
 			{{ i18n.ts._pages.blocks.numberInput }}</template
 		>
 
-		<section style="padding: 0 16px 0 16px">
+		<section style="padding: 0 16px">
 			<MkInput v-model="value.name">
 				<template #prefix
 					><i :class="icon('ph-magic-wand')"></i
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index 915b2cd9..568896d4 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -48,6 +48,6 @@ withDefaults(
 
 <style lang="scss" scoped>
 .kjuadyyj {
-	padding: 0 16px 16px 16px;
+	padding: 0 16px 16px;
 }
 </style>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index d95c6888..ea804812 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -5,7 +5,7 @@
 			{{ i18n.ts._pages.blocks.textInput }}</template
 		>
 
-		<section style="padding: 0 16px 0 16px">
+		<section style="padding: 0 16px">
 			<MkInput v-model="value.name"
 				><template #prefix
 					><i :class="icon('ph-magic-wand')"></i></template
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 1e8599ab..9fdd4040 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -157,14 +157,14 @@ export default defineComponent({
 	> .warn {
 		color: #ea9d34;
 		margin: 0;
-		padding: 16px 16px 0 16px;
+		padding: 16px 16px 0;
 		font-size: 14px;
 	}
 
 	> .error {
 		color: #b4637a;
 		margin: 0;
-		padding: 16px 16px 0 16px;
+		padding: 16px 16px 0;
 		font-size: 14px;
 	}
 
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index e271fcf7..09062008 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -91,7 +91,7 @@
 		<section
 			v-else-if="modelValue.type === 'fn'"
 			class=""
-			style="padding: 0 16px 16px 16px"
+			style="padding: 0 16px 16px"
 		>
 			<MkTextarea v-model="slots">
 				<template #label>{{
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 625b9753..4a1a3fe6 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -600,15 +600,15 @@ definePageMetadata(
 	}
 
 	> section {
-		padding: 0 32px 32px 32px;
+		padding: 0 32px 32px;
 
 		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
+			padding: 0 16px 16px;
 		}
 
 		> .view {
 			display: inline-block;
-			margin: 16px 0 0 0;
+			margin: 16px 0 0;
 			font-size: 14px;
 		}
 
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index c8425d79..9e3cc260 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -438,7 +438,10 @@ definePageMetadata(
 				}
 
 				> .name {
-					margin: 0 0 0 12px;
+					margin-top: 0;
+					margin-bottom: 0;
+					margin-inline-start: 12px;
+					margin-inline-end: 0;
 					font-size: 90%;
 				}
 
@@ -461,7 +464,7 @@ definePageMetadata(
 	}
 
 	> .footer {
-		margin: var(--margin) 0 var(--margin) 0;
+		margin: var(--margin) 0;
 		font-size: 85%;
 		opacity: 0.75;
 	}
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 2e0230d7..50381bb1 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -161,7 +161,10 @@ definePageMetadata({
 	> .avatar {
 		display: block;
 		flex-shrink: 0;
-		margin: 0 12px 0 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 12px;
 
 		> .avatar {
 			width: 50px;
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 9161bcbe..c14e0554 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -92,7 +92,10 @@ definePageMetadata({
 	> .icon {
 		display: block;
 		flex-shrink: 0;
-		margin: 0 12px 0 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 12px;
 		width: 50px;
 		height: 50px;
 		border-radius: 8px;
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 2ddb434d..0e8160e5 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -330,7 +330,7 @@ definePageMetadata(INFO);
 						display: block;
 						width: 50px;
 						height: 50px;
-						margin: 8px auto 16px auto;
+						margin: 8px auto 16px;
 					}
 				}
 			}
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index e86a2a67..c770b56c 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -319,7 +319,7 @@ definePageMetadata({
 			display: inline-block;
 			width: 72px;
 			height: 72px;
-			margin: 0 auto 16px auto;
+			margin: 0 auto 16px;
 		}
 	}
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 0b352ac5..61a42fb2 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -257,7 +257,7 @@ definePageMetadata({
 .add {
 	display: inline-block;
 	padding: 8px;
-	margin-left: 12px;
+	margin-inline-start: 12px;
 	margin-bottom: 12px;
 }
 </style>
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 1b67ee74..77643310 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -736,7 +736,7 @@ definePageMetadata(
 .cmhjzshm {
 	> .selects {
 		display: flex;
-		margin: 0 0 16px 0;
+		margin: 0 0 16px;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index d45fab27..3fe79bbb 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -556,7 +556,10 @@ onUnmounted(() => {
 						bottom: 0;
 						inset-inline-start: 0;
 						width: 100%;
-						padding: 0 0 8px 154px;
+						padding-top: 0;
+						padding-bottom: 8px;
+						padding-inline-start: 154px;
+						padding-inline-end: 0;
 						box-sizing: border-box;
 						color: #fff;
 
@@ -638,7 +641,10 @@ onUnmounted(() => {
 						bottom: 0;
 						inset-inline-start: 0;
 						width: 100%;
-						padding: 0 0 8px 154px;
+						padding-top: 0;
+						padding-bottom: 8px;
+						padding-inline-start: 154px;
+						padding-inline-end: 0;
 						box-sizing: border-box;
 						color: #fff;
 
@@ -669,7 +675,7 @@ onUnmounted(() => {
 				> .title {
 					display: none;
 					text-align: center;
-					padding: 50px 8px 16px 8px;
+					padding: 50px 8px 16px;
 					font-weight: bold;
 					border-bottom: solid 0.5px var(--divider);
 
@@ -733,7 +739,10 @@ onUnmounted(() => {
 				}
 
 				> .description {
-					padding: 72px 12px 2px 24px;
+					padding-top: 72px;
+					padding-bottom: 2px;
+					padding-inline-start: 24px;
+					padding-inline-end: 12px;
 					font-size: 0.95em;
 					top: -65px;
 					position: relative;
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 8f9991bb..b2ca5fef 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -291,7 +291,10 @@ function showMenu(ev) {
 		> .main {
 			position: relative;
 			width: min(480px, 100%);
-			margin: auto auto auto 128px;
+			margin-top: auto;
+			margin-bottom: auto;
+			margin-inline-start: 128px;
+			margin-inline-end: auto;
 			background: var(--panel);
 			border-radius: var(--radius);
 			box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
@@ -324,7 +327,7 @@ function showMenu(ev) {
 				> h1 {
 					display: block;
 					margin: 0;
-					padding: 16px 32px 24px 32px;
+					padding: 16px 32px 24px;
 					font-size: 1.4em;
 
 					> .logo {
@@ -377,8 +380,14 @@ function showMenu(ev) {
 	display: inline-flex;
 	align-items: center;
 	vertical-align: bottom;
-	padding: 6px 12px 6px 6px;
-	margin: 0 10px 0 0;
+	padding-top: 6px;
+	padding-bottom: 6px;
+	padding-inline-start: 6px;
+	padding-inline-end: 12px;
+	margin-top: 0;
+	margin-bottom: 0;
+	margin-inline-start: 0;
+	margin-inline-end: 10px;
 	background: var(--panel);
 	border-radius: 999px;
 
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 1de90ae1..6793bc8f 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -253,7 +253,7 @@ export default defineComponent({
 
 			> h1 {
 				display: block;
-				margin: 0 0 32px 0;
+				margin: 0 0 32px;
 				padding: 0;
 
 				> .logo {
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 8399ac7b..dcf73a17 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -287,7 +287,7 @@ export default defineComponent({
 					> h1 {
 						display: block;
 						margin: 0;
-						padding: 32px 32px 24px 32px;
+						padding: 32px 32px 24px;
 
 						> .logo {
 							vertical-align: bottom;
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index eeb5ac71..80e2fbf3 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -93,11 +93,17 @@ export default defineComponent({
 		}
 
 		> .note {
-			margin: 16px 0 16px auto;
+			margin-top: 16px;
+			margin-bottom: 16px;
+			margin-inline-start: auto;
+			margin-inline-end: 0;
 
 			> .content {
 				padding: 16px;
-				margin: 0 0 0 auto;
+				margin-top: 0;
+				margin-bottom: 0;
+				margin-inline-start: auto;
+				margin-inline-end: 0;
 				max-width: max-content;
 				border-radius: 16px;
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index f345297f..fd8f8d92 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -176,7 +176,7 @@ option {
 }
 
 hr {
-	margin: var(--margin) 0 var(--margin) 0;
+	margin: var(--margin) 0;
 	border: none;
 	height: 1px;
 	background: var(--divider);
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 6c86cb30..85a49a4f 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -326,7 +326,7 @@ function more() {
 			flex: 0.1;
 
 			> .divider {
-				margin: 16px 16px;
+				margin: 16px;
 				border-top: solid 0.5px var(--divider);
 			}
 
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 5603b2a9..3879ac24 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -400,7 +400,7 @@ function more(ev: MouseEvent) {
 				flex: 0.1;
 
 				> .divider {
-					margin: 16px 16px;
+					margin: 16px;
 					border-top: solid 0.5px var(--divider);
 				}
 
@@ -408,7 +408,7 @@ function more(ev: MouseEvent) {
 					position: relative;
 					display: flex;
 					align-items: center;
-					padding-left: 30px;
+					padding-inline-start: 30px;
 					line-height: 2.85rem;
 					margin-bottom: 0.5rem;
 					white-space: nowrap;
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 96687978..b6f73b18 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -86,7 +86,7 @@ const zIndex = os.claimZIndex("high");
 }
 .mk-uploader > ol > li {
 	display: grid;
-	margin: 8px 0 0 0;
+	margin: 8px 0 0;
 	padding: 0;
 	height: 36px;
 	width: 100%;
@@ -116,7 +116,10 @@ const zIndex = os.claimZIndex("high");
 }
 .mk-uploader > ol > li > .top > .name {
 	display: block;
-	padding: 0 8px 0 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-inline-start: 0;
+	padding-inline-end: 8px;
 	margin: 0;
 	font-size: 0.8em;
 	white-space: nowrap;
@@ -129,7 +132,10 @@ const zIndex = os.claimZIndex("high");
 }
 .mk-uploader > ol > li > .top > .status {
 	display: block;
-	margin: 0 0 0 auto;
+	margin-top: 0;
+	margin-bottom: 0;
+	margin-inline-start: auto;
+	margin-inline-end: 0;
 	padding: 0;
 	font-size: 0.8em;
 	flex-shrink: 0;
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 1bdd1285..36548338 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -725,7 +725,7 @@ console.log(mainRouter.currentRoute.value.name);
 		z-index: 1000;
 		bottom: 0;
 		inset-inline-start: 0;
-		padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px;
+		padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index dd51c4b6..afc3be00 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -195,7 +195,7 @@ export default defineComponent({
 
 			> h1 {
 				margin: 0;
-				padding: 96px 32px 0 32px;
+				padding: 96px 32px 0;
 				text-shadow: 0 0 8px black;
 
 				> .logo {
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 9132d8b8..23fb5c50 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -238,7 +238,10 @@ export default defineComponent({
 				}
 
 				> .action {
-					padding: 0 0 0 16px;
+					padding-top: 0;
+					padding-bottom: 0;
+					padding-inline-start: 16px;
+					padding-inline-end: 0;
 				}
 			}
 
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 771be477..f13bd42c 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -210,11 +210,11 @@ export default defineComponent({
 			> h1 {
 				display: block;
 				margin: 0;
-				padding: 32px 0 32px 0;
+				padding: 32px 0;
 				color: #fff;
 
 				&.full {
-					padding: 64px 0 0 0;
+					padding: 64px 0 0;
 
 					> .link {
 						> ::v-deep(.logo) {
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index 64565ed9..78224a79 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -186,7 +186,10 @@ defineExpose<WidgetComponentExpose>({
 		display: block;
 		float: left;
 		width: 40%;
-		padding: 0 16px 0 0;
+		padding-top: 0;
+		padding-bottom: 0;
+		padding-inline-start: 0;
+		padding-inline-end: 16px;
 		box-sizing: border-box;
 
 		> div {
@@ -197,7 +200,7 @@ defineExpose<WidgetComponentExpose>({
 			}
 
 			> p {
-				margin: 0 0 2px 0;
+				margin: 0 0 2px;
 				font-size: 0.75em;
 				line-height: 18px;
 				opacity: 0.8;
diff --git a/packages/client/src/widgets/server-info.vue b/packages/client/src/widgets/server-info.vue
index 48a2e4be..e1b059e4 100644
--- a/packages/client/src/widgets/server-info.vue
+++ b/packages/client/src/widgets/server-info.vue
@@ -80,7 +80,10 @@ defineExpose<WidgetComponentExpose>({
 	display: flex;
 	align-items: center;
 	min-width: 0;
-	padding: 0 16px 0 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-inline-start: 0;
+	padding-inline-end: 16px;
 }
 
 .body {