Merge branch 'develop'

8 files changed, 37 insertions, 40 deletions

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 012ed42385..0f2823d392 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -171,12 +171,4 @@ export default defineComponent({
 		}
 	}
 }
-
-._inContainer_ .sqadhkmv > * {
-	margin: 0 !important;
-	border: none;
-	border-bottom: solid 0.5px var(--divider);
-	border-radius: 0;
-	box-shadow: none;
-}
 </style>
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 1b789093ef..161419f891 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -6,8 +6,8 @@
 
 	<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
 
-	<div v-else class="_magnetParent">
-		<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }" :no-gap="true">
+	<div v-else>
+		<XList class="notifications" :items="items" v-slot="{ item: notification }" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
 			<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 		</XList>
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index 1fe7b18222..36f40dbcab 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -294,19 +294,19 @@ export default defineComponent({
 			preview_inlineMath: '\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)',
 			preview_quote: `> ${this.$ts._mfm.dummy}`,
 			preview_search: `${this.$ts._mfm.dummy} 検索`,
-			preview_jelly: `[jelly 🍮]`,
-			preview_tada: `[tada 🍮]`,
-			preview_jump: `[jump 🍮]`,
-			preview_bounce: `[bounce 🍮]`,
-			preview_shake: `[shake 🍮]`,
-			preview_twitch: `[twitch 🍮]`,
-			preview_spin: `[spin 🍮] [spin.left 🍮] [spin.alternate 🍮]\n[spin.x 🍮] [spin.x,left 🍮] [spin.x,alternate 🍮]\n[spin.y 🍮] [spin.y,left 🍮] [spin.y,alternate 🍮]`,
-			preview_flip: `[flip ${this.$ts._mfm.dummy}]\n[flip.v ${this.$ts._mfm.dummy}]\n[flip.h,v ${this.$ts._mfm.dummy}]`,
-			preview_font: `[font.serif ${this.$ts._mfm.dummy}]\n[font.monospace ${this.$ts._mfm.dummy}]\n[font.cursive ${this.$ts._mfm.dummy}]\n[font.fantasy ${this.$ts._mfm.dummy}]`,
-			preview_x2: `[x2 🍮]`,
-			preview_x3: `[x3 🍮]`,
-			preview_x4: `[x4 🍮]`,
-			preview_blur: `[blur ${this.$ts._mfm.dummy}]`,
+			preview_jelly: `$[jelly 🍮]`,
+			preview_tada: `$[tada 🍮]`,
+			preview_jump: `$[jump 🍮]`,
+			preview_bounce: `$[bounce 🍮]`,
+			preview_shake: `$[shake 🍮]`,
+			preview_twitch: `$[twitch 🍮]`,
+			preview_spin: `$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]`,
+			preview_flip: `$[flip ${this.$ts._mfm.dummy}]\n$[flip.v ${this.$ts._mfm.dummy}]\n$[flip.h,v ${this.$ts._mfm.dummy}]`,
+			preview_font: `$[font.serif ${this.$ts._mfm.dummy}]\n$[font.monospace ${this.$ts._mfm.dummy}]\n$[font.cursive ${this.$ts._mfm.dummy}]\n$[font.fantasy ${this.$ts._mfm.dummy}]`,
+			preview_x2: `$[x2 🍮]`,
+			preview_x3: `$[x3 🍮]`,
+			preview_x4: `$[x4 🍮]`,
+			preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
 		}
 	},
 });
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 6ff09e2b68..d7b570e5f4 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="xcukqgmh _root _magnetParent" v-if="page" :key="page.id" v-size="{ max: [450] }">
-	<div class="_block _magnetChild main">
+<div class="xcukqgmh _root" v-if="page" :key="page.id" v-size="{ max: [450] }">
+	<div class="_block main">
 		<!--
 		<div class="header">
 			<h1>{{ page.title }}</h1>
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index 0e0116465c..efad31c252 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,10 +1,8 @@
 <template>
-<div class="cmuxhskf _root _magnetParent" v-hotkey.global="keymap">
-	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-
+<div class="cmuxhskf _root" v-hotkey.global="keymap">
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
-	<div class="tabs _block _magnetChild">
+	<div class="tabs _block">
 		<div class="left">
 			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
 			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
@@ -32,6 +30,7 @@
 		@after="after()"
 		@queue="queueUpdated"
 	/>
+	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 </div>
 </template>
 
diff --git a/src/client/style.scss b/src/client/style.scss
index eadf56bf37..ab8da9ccfa 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -243,7 +243,10 @@ hr {
 
 ._block {
 	@extend ._panel;
-	margin: var(--margin) 0;
+
+	& + ._block {
+		margin-top: var(--margin);
+	}
 }
 
 ._gap {
@@ -323,6 +326,11 @@ hr {
 	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;
 	}
@@ -344,7 +352,7 @@ hr {
 }
 
 ._flat_ {
-	--root-margin: 0;
+	--root-margin: 0px;
 	--baseContentWidth: 100%;
 	--panelShadow: none;
 
@@ -365,17 +373,11 @@ hr {
 
 	@media (max-width: 500px) {
 		._root {
-			--root-margin: 0;
+			--root-margin: 0px;
 		}
 	}
 }
 
-._magnetParent {
-	._magnetChild:not(* + ._magnetChild) {
-		margin-top: 0;
-	}
-}
-
 ._narrow_ ._card {
 	> ._title {
 		padding: 16px;
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 3fae7c27ee..7a08b65a64 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _inContainer_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index e0f85f2459..e5a0419387 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="efzpzdvf">
-	<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
 	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
 	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
@@ -64,6 +64,10 @@ export default defineComponent({
 	box-sizing: border-box;
 	padding-bottom: 8px;
 
+	> .widgets {
+		width: 300px;
+	}
+
 	> .edit {
 		display: block;
 		margin: 16px auto;