Fix margins and paddings and use full viewport width

settings/ui/components/SettingsApp.vue

@@ -1,38 +1,40 @@
 <template>
-  <div>
-    <div v-if="initialized" class="uk-width-3-4@m uk-container uk-padding">
-      <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
-        <p class="uk-flex uk-flex-middle">
-          <oc-icon name="info" class="uk-margin-xsmall-right" />
-          <translate>No settings available</translate>
-        </p>
-      </oc-alert>
-      <template v-else>
-        <template v-if="selectedExtensionName">
-          <div class="uk-flex uk-flex-between uk-flex-middle">
-            <h1 class="oc-page-title">
-              {{ selectedExtensionName }}
-            </h1>
+  <div class="oc-p">
+    <div class="uk-flex uk-flex-column" id="settings-app">
+      <template v-if="initialized">
+        <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
+          <p class="uk-flex uk-flex-middle">
+            <oc-icon name="info" class="oc-mr-s" />
+            <translate>No settings available</translate>
+          </p>
+        </oc-alert>
+        <template v-else>
+          <template v-if="selectedExtensionName">
+            <div class="uk-flex uk-flex-between uk-flex-middle">
+              <h1 class="oc-page-title">
+                {{ selectedExtensionName }}
+              </h1>
+            </div>
+            <hr />
+          </template>
+          <template v-if="settingsValuesLoaded">
+            <settings-bundle
+              v-for="bundle in selectedBundles"
+              :key="'bundle-' + bundle.id"
+              :bundle="bundle"
+              class="oc-mt"
+            />
+          </template>
+          <div class="oc-mt" v-else>
+            <oc-loader :aria-label="$gettext('Loading personal settings')" />
+            <oc-alert :aria-hidden="true" varition="primary" no-close>
+              <p v-translate>Loading personal settings...</p>
+            </oc-alert>
           </div>
-          <hr />
         </template>
-        <template v-if="settingsValuesLoaded">
-          <settings-bundle
-            v-for="bundle in selectedBundles"
-            :key="'bundle-' + bundle.id"
-            :bundle="bundle"
-            class="uk-margin-top"
-          />
-        </template>
-        <div class="uk-margin-top" v-else>
-          <oc-loader :aria-label="$gettext('Loading personal settings')" />
-          <oc-alert :aria-hidden="true" varition="primary" no-close>
-            <p v-translate>Loading personal settings...</p>
-          </oc-alert>
-        </div>
       </template>
+      <oc-loader v-else />
     </div>
-    <oc-loader v-else />
   </div>
 </template>
 

settings/ui/components/SettingsBundle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="uk-width-1-1 uk-width-2-3@m uk-width-1-2@l">
-    <div class="uk-text-bold uk-margin-small-bottom">
+    <div class="oc-text-bold oc-mb-s">
       <translate>{{ bundle.displayName }}</translate>
     </div>
     <oc-grid gutter="small">

settings/ui/components/settings/SettingNumber.vue

@@ -12,10 +12,10 @@
       />
     </div>
     <div v-if="isChanged">
-      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+      <oc-button @click="cancel" class="oc-ml-s">
         <translate>Cancel</translate>
       </oc-button>
-      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+      <oc-button @click="applyValue" class="oc-ml-s" variation="primary">
         <translate>Save</translate>
       </oc-button>
     </div>

settings/ui/components/settings/SettingString.vue

@@ -10,10 +10,10 @@
       />
     </div>
     <div v-if="isChanged">
-      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+      <oc-button @click="cancel" class="oc-ml-s">
         <translate>Cancel</translate>
       </oc-button>
-      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+      <oc-button @click="applyValue" class="oc-ml-s" variation="primary">
         <translate>Save</translate>
       </oc-button>
     </div>