From bf21b8412909cae4c49d27cbec9c040ed9213067 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Fri, 2 Jun 2023 22:54:23 -0400
Subject: [PATCH] fix mfm-cheat-sheet styling

---
 .../client/src/components/MkCheatSheetDialog.vue   |  8 ++------
 packages/client/src/pages/mfm-cheat-sheet.vue      | 14 ++++++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/MkCheatSheetDialog.vue b/packages/client/src/components/MkCheatSheetDialog.vue
index 04b8cec6e2..519955d484 100644
--- a/packages/client/src/components/MkCheatSheetDialog.vue
+++ b/packages/client/src/components/MkCheatSheetDialog.vue
@@ -6,12 +6,7 @@
 		@closed="$emit('closed')"
 	>
 		<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
-
-		<div class="_monolithic_">
-			<div class="_section">
-				<XCheatSheet />
-			</div>
-		</div>
+		<XCheatSheet :popup="true" style="background: var(--bg)"/>
 	</XModalWindow>
 </template>
 
@@ -41,4 +36,5 @@ function close(res) {
 .fade-leave-to {
 	opacity: 0;
 }
+
 </style>
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index a22d7ce1ec..e9fb213b7e 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -1,8 +1,8 @@
 <template>
 	<MkStickyContainer>
-		<template #header><MkPageHeader /></template>
+		<template #header><MkPageHeader v-if="!popup" /></template>
 		<MkSpacer :content-max="800">
-			<div :class="$style.root">
+			<div class="mfm-cheat-sheet">
 				<div>{{ i18n.ts._mfm.intro }}</div>
 				<br />
 				<div class="section _block">
@@ -449,6 +449,10 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 
+defineProps<{
+	popup?: boolean
+}>();
+
 let preview_mention = $ref("@example");
 let preview_hashtag = $ref("#test");
 let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://calckey.org)`);
@@ -514,10 +518,8 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" module>
-.root {
-	background: var(--bg);
-
+<style lang="scss" scoped>
+.mfm-cheat-sheet {
 	> .section {
 		> .title {
 			position: sticky;