🎨 Toast button now align to end

assets/css/styles.scss

@@ -803,7 +803,7 @@ input[type="radio"]:checked + label + .tab {
 }
 
 .toasted-container .toasted {
-  justify-content: start !important;
+  justify-content: flex-start !important;
 }
 
 .toasted.info {
@@ -816,6 +816,10 @@ input[type="radio"]:checked + label + .tab {
   color: inherit !important;
 }
 
+.toasted .action {
+  margin-left: auto !important;
+}
+
 .page-columns {
   display: flex;
   flex: 1;

components/ace-editor.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-const DEFAULT_THEME = "dracula";
+const DEFAULT_THEME = "twilight";
 
 import ace from "ace-builds";
 import "ace-builds/webpack-resolver";

pages/index.vue

@@ -682,10 +682,7 @@
           <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">{{ $t("history") }}</label>
           <div class="tab">
-            <history
-              @useHistory="handleUseHistory"
-              ref="historyComponent"
-            />
+            <history @useHistory="handleUseHistory" ref="historyComponent" />
           </div>
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>