feat: add flex wrap for mobile

open-isle-cli/src/assets/toast.css

@@ -1,4 +1,7 @@
-/* Custom styles for vue-toastification */
+.Vue-Toastification__toast {
+  border-radius: 20px;
+}
+
 .Vue-Toastification__toast--info {
   background-color: #d0e9ff;
   color: #1b6ec2;
@@ -8,26 +11,25 @@
   color: #2b7a2b;
 }
 .Vue-Toastification__toast--error {
-  background-color: #ffe4e4;
+  background-color: #f99a9a;
   color: #b73737;
 }
 
-@media (max-width: 600px) {
-  .Vue-Toastification__container {
+@media (max-width: 768px) {
+  .Vue-Toastification__container.open-isle-toast-style-v1 {
     width: auto;
     max-width: 90vw;
     right: 0.5em;
     left: auto;
   }
-  .Vue-Toastification__toast {
-    padding: 12px 14px;
-  }
+
   .Vue-Toastification__toast-body {
     font-size: 14px;
     line-height: 20px;
   }
+
   .Vue-Toastification__close-button {
-    font-size: 20px;
-    line-height: 20px;
+    font-size: 18px;
+    line-height: 18px;
   }
 }

open-isle-cli/src/main.js

@@ -30,7 +30,17 @@ initTheme()
 
 const app = createApp(App)
 app.use(router)
-app.use(Toast, { position: POSITION.TOP_RIGHT })
+app.use(
+  Toast, 
+  { 
+    position: POSITION.TOP_RIGHT,
+    containerClassName: "open-isle-toast-style-v1",
+    transition: "Vue-Toastification__fade",
+    // closeButton: false,
+    timeout: 2000,
+  }, 
+)
+
 app.mount('#app')
 
 checkToken().then(valid => {