chore: improving styling for mobile (responsive) & title change (#46)

* chore: improving styling for mobile (responsive)

* chore: title change

* docs: update type of change list

.github/pull_request_template.md

@@ -13,9 +13,10 @@ Please carefully read the contribution docs before creating a pull request
 
 <!-- What types of changes does your code introduce? Put an `x` in all the boxes that apply. -->
 
+- [ ] 🧹 Updates to the build process or auxiliary tools and libraries
 - [ ] 📖 Documentation (updates to the documentation or readme)
 - [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
-- [ ] 👌 Enhancement (improving an existing functionality like performance)
+- [ ] 🚀 Enhancement (improving an existing functionality like performance)
 - [ ] ✨ New feature (a non-breaking change that adds functionality)
 - [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)
 

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Vue Toastify</title>
     <script>
           if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
               document.documentElement.dataset.theme = 'halloween';

src/App.vue

@@ -70,7 +70,7 @@
                     </div>
                 </div>
                 <div class="w-full sm:w-1/2 xl:w-1/4 sm:max-w-50 sm:ml-2">
-                    <div class="w-1/2 mx-auto lg:w-2/3 xl:w-1/2 mb-12 space-y-1">
+                    <div class="w-1/2 md:mx-auto lg:w-2/3 xl:w-1/2 mt-12 md:mt-0 mb-12 space-y-1">
                         <AppToggle v-model="status.pauseOnHover"
                                    :disabled="!status.canTimeout"
                                    label="Can be Paused"
@@ -119,7 +119,7 @@
                         @click="loadStop">
                     Call .stopLoader()
                 </button>
-                <button class="btn btn-primary" @click="addToast">
+                <button class="btn btn-primary my-4 md:my-0" @click="addToast">
                     Toastify!
                 </button>
             </div>
@@ -153,7 +153,7 @@ import AppSelect from './app-components/AppSelect.vue';
 import AppTextarea from './app-components/AppTextarea.vue';
 import AppStatusDisplay from './app-components/AppStatusDisplay.vue';
 import { isObject } from './utils';
-import AppThemeToggle from "./app-components/AppThemeToggle.vue";
+import AppThemeToggle from './app-components/AppThemeToggle.vue';
 
 export default defineComponent({
     name: 'App',