Refactor views to use a responsive width wrapper component

resources/js/components/FormWrapper.vue

@@ -1,11 +1,9 @@
 <template>
-    <div class="columns is-centered">
-        <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
+    <responsive-width-wrapper>
         <h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
         <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
         <slot />
-        </div>
-    </div>    
+    </responsive-width-wrapper>   
 </template>
 
 <script>

resources/js/components/ResponsiveWidthWrapper.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="columns is-centered">
+        <div class="form-column column is-two-thirds-tablet is-half-desktop is-half-widescreen is-one-third-fullhd">
+            <slot />
+        </div>
+    </div>    
+</template>
+
+<script>
+    export default {
+        name: 'ResponsiveWidthWrapper',
+        
+        data() {
+            return {
+
+            }
+        },
+    }
+</script>

resources/js/components/SettingTabs.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="options-header has-background-black-ter">
-        <div class="columns is-centered">
-            <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
+        <responsive-width-wrapper>
             <div class="tabs is-centered is-fullwidth">
                 <ul>
                     <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
@@ -9,8 +8,7 @@
                     </li>
                 </ul>
             </div>
-            </div>
-        </div>
+        </responsive-width-wrapper>
     </div>
 </template>
 

resources/js/components/index.js

@@ -13,6 +13,7 @@ import FormButtons      from './FormButtons'
 import VueFooter        from './Footer'
 import Kicker           from './Kicker'
 import SettingTabs      from './SettingTabs'
+import ResponsiveWidthWrapper from './ResponsiveWidthWrapper'
 
 // Components that are registered globaly.
 [
@@ -29,7 +30,8 @@ import SettingTabs      from './SettingTabs'
     FormButtons,
     VueFooter,
     Kicker,
-    SettingTabs
+    SettingTabs,
+    ResponsiveWidthWrapper
 ].forEach(Component => {
 	Vue.component(Component.name, Component)
 })

resources/js/views/About.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="columns is-centered">
-        <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
+    <responsive-width-wrapper>
         <h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1>
         <p class="block">
             <span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
@@ -80,8 +79,7 @@
                 <router-link  :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
             </p>
         </vue-footer>
-        </div>
-    </div>
+    </responsive-width-wrapper>
 </template>
 
 <script>

resources/js/views/Groups.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="columns is-centered">
-        <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
+    <responsive-width-wrapper>
         <h1 class="title has-text-grey-dark">
             {{ $t('groups.groups') }}
         </h1>
@@ -41,8 +40,7 @@
                 <router-link  :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
             </p>
         </vue-footer>
-        </div>
-    </div>
+    </responsive-width-wrapper>
 </template>
 
 <script>

resources/js/views/twofaccounts/Import.vue

@@ -1,7 +1,6 @@
 <template>
     <div>
-        <div class="columns is-centered">
-            <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
+        <responsive-width-wrapper>
             <h1 class="title has-text-grey-dark">
                 {{ $t('twofaccounts.import.import') }}
             </h1>
@@ -146,8 +145,7 @@
                     <router-link  :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link>
                 </p>
             </vue-footer>
-            </div>
-        </div>
+        </responsive-width-wrapper>
         <!-- modal -->
         <modal v-model="ShowTwofaccountInModal">
             <otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()">