From 4d1c723496655da459d3803d20d11a80a5df7978 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 23 Oct 2021 23:22:20 +0900
Subject: [PATCH] refactor clinet

---
 src/client/components/modal-page-window.vue |   2 +-
 src/client/components/page-window.vue       |   2 +-
 src/client/components/ui/folder.vue         |   6 -
 src/client/components/ui/info.vue           |   4 -
 src/client/pages/admin/index.vue            |   1 -
 src/client/pages/messaging/index.vue        |  68 +++----
 src/client/pages/note.vue                   |  82 +++++----
 src/client/pages/settings/index.vue         |   1 -
 src/client/pages/user/index.timeline.vue    |   7 -
 src/client/pages/user/index.vue             | 190 ++++++++++----------
 src/client/style.scss                       |  44 -----
 src/client/ui/chat/side.vue                 |   2 +-
 src/client/ui/deck/main-column.vue          |   2 +-
 src/client/ui/default.vue                   |   2 +-
 src/client/widgets/notifications.vue        |   2 +-
 15 files changed, 171 insertions(+), 244 deletions(-)

diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index cb81a974f5..621119294e 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -10,7 +10,7 @@
 			</span>
 			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
-		<div class="body _fitSide_">
+		<div class="body">
 			<keep-alive>
 				<component :is="component" v-bind="props" :ref="changePage"/>
 			</keep-alive>
diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue
index 7d15c75d62..2b77a214c5 100644
--- a/src/client/components/page-window.vue
+++ b/src/client/components/page-window.vue
@@ -16,7 +16,7 @@
 	<template #headerLeft>
 		<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
 	</template>
-	<div class="yrolvcoq _fitSide_">
+	<div class="yrolvcoq">
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </XWindow>
diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue
index d0616a57c1..3997421d08 100644
--- a/src/client/components/ui/folder.vue
+++ b/src/client/components/ui/folder.vue
@@ -153,10 +153,4 @@ export default defineComponent({
 		}
 	}
 }
-
-._fitSide_ .ssazuxis {
-	> header {
-		padding: 0 16px;
-	}
-}
 </style>
diff --git a/src/client/components/ui/info.vue b/src/client/components/ui/info.vue
index e16f2736f1..f6b2edf267 100644
--- a/src/client/components/ui/info.vue
+++ b/src/client/components/ui/info.vue
@@ -42,8 +42,4 @@ export default defineComponent({
 		margin-right: 4px;
 	}
 }
-
-._fitSide_ .fpezltsf {
-	border-radius: 0;
-}
 </style>
diff --git a/src/client/pages/admin/index.vue b/src/client/pages/admin/index.vue
index 416e68206c..f18c634959 100644
--- a/src/client/pages/admin/index.vue
+++ b/src/client/pages/admin/index.vue
@@ -343,7 +343,6 @@ export default defineComponent({
 		> .main {
 			flex: 1;
 			min-width: 0;
-			--baseContentWidth: 100%;
 		}
 	}
 
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index fef3b76e10..b3e0b6edd0 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -2,41 +2,43 @@
 <div>
 	<MkHeader :info="header"/>
 
-	<div class="yweeujhr _root" v-size="{ max: [400] }">
-		<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
+	<MkSpacer :content-max="800">
+		<div class="yweeujhr" v-size="{ max: [400] }">
+			<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
-		<div class="history" v-if="messages.length > 0">
-			<MkA v-for="(message, i) in messages"
-				class="message _block"
-				:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
-				:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
-				:data-index="i"
-				:key="message.id"
-				v-anim="i"
-			>
-				<div>
-					<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
-					<header v-if="message.groupId">
-						<span class="name">{{ message.group.name }}</span>
-						<MkTime :time="message.createdAt" class="time"/>
-					</header>
-					<header v-else>
-						<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-						<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-						<MkTime :time="message.createdAt" class="time"/>
-					</header>
-					<div class="body">
-						<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
+			<div class="history" v-if="messages.length > 0">
+				<MkA v-for="(message, i) in messages"
+					class="message _block"
+					:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
+					:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
+					:data-index="i"
+					:key="message.id"
+					v-anim="i"
+				>
+					<div>
+						<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
+						<header v-if="message.groupId">
+							<span class="name">{{ message.group.name }}</span>
+							<MkTime :time="message.createdAt" class="time"/>
+						</header>
+						<header v-else>
+							<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
+							<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+							<MkTime :time="message.createdAt" class="time"/>
+						</header>
+						<div class="body">
+							<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
+						</div>
 					</div>
-				</div>
-			</MkA>
+				</MkA>
+			</div>
+			<div class="_fullinfo" v-if="!fetching && messages.length == 0">
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<div>{{ $ts.noHistory }}</div>
+			</div>
+			<MkLoading v-if="fetching"/>
 		</div>
-		<div class="_fullinfo" v-if="!fetching && messages.length == 0">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ $ts.noHistory }}</div>
-		</div>
-		<MkLoading v-if="fetching"/>
-	</div>
+	</MkSpacer>
 </div>
 </template>
 
@@ -177,7 +179,7 @@ export default defineComponent({
 .yweeujhr {
 
 	> .start {
-		margin: var(--margin) auto var(--margin) auto;
+		margin: 0 auto var(--margin) auto;
 	}
 
 	> .history {
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index fe85d7364e..8e95430d67 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="fcuexfpr">
-	<div class="_root">
+<MkSpacer :content-max="800">
+	<div class="fcuexfpr">
 		<transition name="fade" mode="out-in">
 			<div v-if="note" class="note">
 				<div class="_gap" v-if="showNext">
@@ -34,7 +34,7 @@
 			<MkLoading v-else/>
 		</transition>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -153,54 +153,52 @@ export default defineComponent({
 .fcuexfpr {
 	background: var(--bg);
 
-	> ._root {
-		> .note {
-			> .main {
-				> .load {
-					min-width: 0;
-					margin: 0 auto;
-					border-radius: 999px;
+	> .note {
+		> .main {
+			> .load {
+				min-width: 0;
+				margin: 0 auto;
+				border-radius: 999px;
 
-					&.next {
-						margin-bottom: var(--margin);
-					}
-
-					&.prev {
-						margin-top: var(--margin);
-					}
+				&.next {
+					margin-bottom: var(--margin);
 				}
 
+				&.prev {
+					margin-top: var(--margin);
+				}
+			}
+
+			> .note {
 				> .note {
-					> .note {
-						border-radius: var(--radius);
-						background: var(--panel);
-					}
+					border-radius: var(--radius);
+					background: var(--panel);
+				}
+			}
+
+			> .clips {
+				> .title {
+					font-weight: bold;
+					padding: 12px;
 				}
 
-				> .clips {
-					> .title {
-						font-weight: bold;
-						padding: 12px;
+				> .item {
+					display: block;
+					padding: 16px;
+
+					> .description {
+						padding: 8px 0;
 					}
 
-					> .item {
-						display: block;
-						padding: 16px;
+					> .user {
+						$height: 32px;
+						padding-top: 16px;
+						border-top: solid 0.5px var(--divider);
+						line-height: $height;
 
-						> .description {
-							padding: 8px 0;
-						}
-
-						> .user {
-							$height: 32px;
-							padding-top: 16px;
-							border-top: solid 0.5px var(--divider);
-							line-height: $height;
-
-							> .avatar {
-								width: $height;
-								height: $height;
-							}
+						> .avatar {
+							width: $height;
+							height: $height;
 						}
 					}
 				}
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index 9da3031a41..d9f827a3ca 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -311,7 +311,6 @@ export default defineComponent({
 			flex: 1;
 			min-width: 0;
 			overflow: auto;
-			--baseContentWidth: 100%;
 		}
 	}
 }
diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue
index 9057d90396..c3444f26f6 100644
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -65,11 +65,4 @@ export default defineComponent({
 		background: var(--bg);
 	}
 }
-
-._fitSide_ .yrzkoczt {
-	> .tab {
-		padding-left: var(--margin);
-		padding-right: var(--margin);
-	}
-}
 </style>
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index f74bf49883..996e613866 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -81,20 +81,38 @@
 				</div>
 			</div>
 		</div>
-		<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
-			<!-- TODO -->
-			<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
-			<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
+		<MkSpacer v-else-if="user && narrow === true" :content-max="800">
+			<div class="ftskorzw narrow" v-size="{ max: [500] }">
+				<!-- TODO -->
+				<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
+				<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
 
-			<div class="profile">
-				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
+				<div class="profile">
+					<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
 
-				<div class="_block main" :key="user.id">
-					<div class="banner-container" :style="style">
-						<div class="banner" ref="banner" :style="style"></div>
-						<div class="fade"></div>
+					<div class="_block main" :key="user.id">
+						<div class="banner-container" :style="style">
+							<div class="banner" ref="banner" :style="style"></div>
+							<div class="fade"></div>
+							<div class="title">
+								<MkUserName class="name" :user="user" :nowrap="true"/>
+								<div class="bottom">
+									<span class="username"><MkAcct :user="user" :detail="true" /></span>
+									<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+									<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+									<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+									<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+								</div>
+							</div>
+							<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
+							<div class="actions" v-if="$i">
+								<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+								<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+							</div>
+						</div>
+						<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 						<div class="title">
-							<MkUserName class="name" :user="user" :nowrap="true"/>
+							<MkUserName :user="user" :nowrap="false" class="name"/>
 							<div class="bottom">
 								<span class="username"><MkAcct :user="user" :detail="true" /></span>
 								<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
@@ -103,90 +121,74 @@
 								<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
 							</div>
 						</div>
-						<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
-						<div class="actions" v-if="$i">
-							<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
-							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+						<div class="description">
+							<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+							<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
 						</div>
-					</div>
-					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-					<div class="title">
-						<MkUserName :user="user" :nowrap="false" class="name"/>
-						<div class="bottom">
-							<span class="username"><MkAcct :user="user" :detail="true" /></span>
-							<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
-							<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
-							<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
-							<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+						<div class="fields system">
+							<dl class="field" v-if="user.location">
+								<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
+								<dd class="value">{{ user.location }}</dd>
+							</dl>
+							<dl class="field" v-if="user.birthday">
+								<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
+								<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+							</dl>
+							<dl class="field">
+								<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
+								<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
+							</dl>
+						</div>
+						<div class="fields" v-if="user.fields.length > 0">
+							<dl class="field" v-for="(field, i) in user.fields" :key="i">
+								<dt class="name">
+									<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+								</dt>
+								<dd class="value">
+									<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
+								</dd>
+							</dl>
+						</div>
+						<div class="status">
+							<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
+								<b>{{ number(user.notesCount) }}</b>
+								<span>{{ $ts.notes }}</span>
+							</MkA>
+							<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
+								<b>{{ number(user.followingCount) }}</b>
+								<span>{{ $ts.following }}</span>
+							</MkA>
+							<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
+								<b>{{ number(user.followersCount) }}</b>
+								<span>{{ $ts.followers }}</span>
+							</MkA>
 						</div>
-					</div>
-					<div class="description">
-						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-						<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
-					</div>
-					<div class="fields system">
-						<dl class="field" v-if="user.location">
-							<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
-							<dd class="value">{{ user.location }}</dd>
-						</dl>
-						<dl class="field" v-if="user.birthday">
-							<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
-							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-						</dl>
-						<dl class="field">
-							<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
-							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-						</dl>
-					</div>
-					<div class="fields" v-if="user.fields.length > 0">
-						<dl class="field" v-for="(field, i) in user.fields" :key="i">
-							<dt class="name">
-								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
-							</dt>
-							<dd class="value">
-								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
-							</dd>
-						</dl>
-					</div>
-					<div class="status">
-						<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
-							<b>{{ number(user.notesCount) }}</b>
-							<span>{{ $ts.notes }}</span>
-						</MkA>
-						<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
-							<b>{{ number(user.followingCount) }}</b>
-							<span>{{ $ts.following }}</span>
-						</MkA>
-						<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
-							<b>{{ number(user.followersCount) }}</b>
-							<span>{{ $ts.followers }}</span>
-						</MkA>
 					</div>
 				</div>
-			</div>
 
-			<div class="contents">
-				<template v-if="page === 'index'">
-					<div>
-						<div v-if="user.pinnedNotes.length > 0" class="_gap">
-							<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+				<div class="contents">
+					<template v-if="page === 'index'">
+						<div>
+							<div v-if="user.pinnedNotes.length > 0" class="_gap">
+								<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+							</div>
+							<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
+							<XPhotos :user="user" :key="user.id"/>
+							<XActivity :user="user" :key="user.id"/>
 						</div>
-						<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
-						<XPhotos :user="user" :key="user.id"/>
-						<XActivity :user="user" :key="user.id"/>
-					</div>
-					<div>
-						<XUserTimeline :user="user"/>
-					</div>
-				</template>
-				<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
-				<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
-				<XReactions v-else-if="page === 'reactions'" :user="user" class="_gap"/>
-				<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
-				<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
-				<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
+						<div>
+							<XUserTimeline :user="user"/>
+						</div>
+					</template>
+					<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
+					<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
+					<XReactions v-else-if="page === 'reactions'" :user="user" class="_gap"/>
+					<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
+					<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
+					<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
+				</div>
 			</div>
-		</div>
+		</MkSpacer>
 		<MkError v-else-if="error" @retry="fetch()"/>
 		<MkLoading v-else/>
 	</transition>
@@ -833,16 +835,4 @@ export default defineComponent({
 		}
 	}
 }
-
-._fitSide_ .ftskorzw.narrow {
-	> .profile {
-		> .warn {
-			margin: 0;
-		}
-
-		> .main {
-			margin-top: 0;
-		}
-	}
-}
 </style>
diff --git a/src/client/style.scss b/src/client/style.scss
index d6bad5a24d..0275efa8be 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -1,7 +1,6 @@
 @charset "utf-8";
 
 :root {
-	--baseContentWidth: 760px;
 	--radius: 12px;
 	--marginFull: 16px;
 	--marginHalf: 10px;
@@ -349,22 +348,6 @@ hr {
 	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
 }
 
-// TODO: 廃止
-._root {
-	box-sizing: border-box;
-	margin: var(--root-margin, 32px) auto;
-	max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
-
-	// 子marginが突き抜けるのを防ぐため
-	// https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element
-	padding-top: 1px;
-	margin-top: calc(var(--root-margin, 32px) - 1px);
-
-	@media (max-width: 500px) {
-		--root-margin: 10px;
-	}
-}
-
 ._monolithic_ {
 	._section:not(:empty) {
 		box-sizing: border-box;
@@ -380,33 +363,6 @@ hr {
 	}
 }
 
-._fitSide_ {
-	--root-margin: 0px;
-	--baseContentWidth: 100%;
-	--panelBorder: none;
-
-	._block {
-		//border-top: solid 0.5px var(--divider);
-		//border-bottom: solid 0.5px var(--divider);
-		border-radius: 0;
-		box-shadow: none;
-	}
-
-	._isolated {
-		margin: var(--margin);
-	}
-
-	._block._isolated {
-		border-radius: var(--radius);
-	}
-
-	@media (max-width: 500px) {
-		._root {
-			--root-margin: 0px;
-		}
-	}
-}
-
 ._narrow_ ._card {
 	> ._title {
 		padding: 16px;
diff --git a/src/client/ui/chat/side.vue b/src/client/ui/chat/side.vue
index 3fd0a0e77b..a8a538c75b 100644
--- a/src/client/ui/chat/side.vue
+++ b/src/client/ui/chat/side.vue
@@ -3,7 +3,7 @@
 	<header class="header" @contextmenu.prevent.stop="onContextmenu">
 		<MkHeader class="title" :info="pageInfo" :center="false"/>
 	</header>
-	<component :is="component" v-bind="props" :ref="changePage" class="body _fitSide_"/>
+	<component :is="component" v-bind="props" :ref="changePage" class="body"/>
 </div>
 </template>
 
diff --git a/src/client/ui/deck/main-column.vue b/src/client/ui/deck/main-column.vue
index baf88a9721..591897bba7 100644
--- a/src/client/ui/deck/main-column.vue
+++ b/src/client/ui/deck/main-column.vue
@@ -7,7 +7,7 @@
 		</template>
 	</template>
 
-	<router-view v-slot="{ Component }" class="_fitSide_">
+	<router-view v-slot="{ Component }">
 		<transition>
 			<keep-alive :include="['timeline']">
 				<component :is="Component" :ref="changePage" @contextmenu.stop="onContextmenu"/>
diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index 3518b1a91a..0f0773e415 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -13,7 +13,7 @@
 		</template>
 
 		<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-			<div class="content" :class="{ _fitSide_: !fullView }">
+			<div class="content">
 				<router-view v-slot="{ Component }">
 					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
 						<keep-alive :include="['timeline']">
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index b0245eed6a..5e2648f5b9 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -3,7 +3,7 @@
 	<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
 	<template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template>
 
-	<div class="_fitSide_">
+	<div>
 		<XNotifications :include-types="props.includingTypes"/>
 	</div>
 </MkContainer>