fix extra format buttons

EaseCation · Aug 13, 2024 · 2e21e9f · 2e21e9f
1 parent 1c622cd
commit 2e21e9f
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/components/MCTextFormatter.vue b/src/components/MCTextFormatter.vue
@@ -39,7 +39,7 @@
                 <format-button v-if="braceMode" v-bind:format="'{reset}'" @format="insertFormat">
                     {{ $t('format.reset') }}{reset}
                 </format-button>
-                <div v-if="extraMode">
+                <div class="format-buttons-extra" v-if="extraMode">
                     <format-button v-for="char in extraChars" v-bind:key="char" v-bind:format="char" @format="insertFormat">
                         {{ char }}
                     </format-button>
@@ -436,6 +436,15 @@ body {
     align-content: flex-start;
 }
 
+.format-buttons-extra {
+    display: flex;
+    gap: 8px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: flex-start;
+}
+
 .output {
     flex: 1;
     box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
@@ -578,6 +587,12 @@ a:hover {
         padding: 12px;
         gap: 16px;
     }
+    .format-buttons {
+        gap: 6px;
+    }
+    .format-buttons-extra {
+        gap: 6px;
+    }
 }
 
 /* 暗黑模式 */