client: add default margin to FormSwitch and MkButton

CONTRIBUTING.md

@@ -316,8 +316,8 @@ This does not apply when using the Composition API since reactivation is manual.
 If you import json in TypeScript, the json file will be spit out together with the TypeScript file into the dist directory when compiling with tsc. This behavior may cause unintentional rewriting of files, so when importing json files, be sure to check whether the files are allowed to be rewritten or not. If you do not want the file to be rewritten, you should make sure that the file can be rewritten by importing the json file. If you do not want the file to be rewritten, use functions such as `fs.readFileSync` to read the file instead of importing it.
 
 ### Component style definitions do not have a `margin`
-Setting the `margin` of a component may be confusing.
-Instead, it should always be the user of a component that sets a `margin`.
+~~Setting the `margin` of a component may be confusing. Instead, it should always be the user of a component that sets a `margin`.~~
+This was a philosophy used previously. Hoever it now seems a better idea to add a default margin to the top level element of a component which can be easily overwritten on the usage of that component with a `style` attribute.
 
 ### Do not use the word "follow" in HTML class names
 This has caused things to be blocked by an ad blocker in the past.

packages/client/src/components/form/switch.vue

@@ -13,7 +13,7 @@
 		<div class="knob"></div>
 	</span>
 	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
+		<!-- TODO: do not use unnamed slot -->
 		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
 		<p class="caption"><slot name="caption"></slot></p>
 	</span>
@@ -50,6 +50,7 @@ const toggle = () => {
 	position: relative;
 	display: flex;
 	transition: all 0.2s ease;
+	margin: var(--margin) 0;
 
 	> * {
 		user-select: none;

packages/client/src/components/ui/button.vue

@@ -134,6 +134,7 @@ function onMousedown(evt: MouseEvent): void {
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
+	margin: var(--margin) 0;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);

packages/client/src/pages/admin/emojis.vue

@@ -9,7 +9,7 @@
 						<template #prefix><i class="fas fa-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</FormInput>
-					<FormSwitch v-model="selectMode" style="margin: 8px 0;">
+					<FormSwitch v-model="selectMode">
 						<template #label>{{ i18n.ts.selectMode }}</template>
 					</FormSwitch>
 					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">