improve settings components and scss

src/components/settings/form/FormDisplayPicker.vue

@@ -1,51 +1,50 @@
 <template>
-  <NcButton
-    :variant="is(false, false, false) ? 'primary' : 'seconday'"
-    @click="update(false, false, false)"
-  >
-    {{ t('side_menu', 'Default') }}
-  </NcButton>
-  <NcButton
-    :variant="is(true, false, false) ? 'primary' : 'seconday'"
-    @click="update(true, false, false)"
-  >
-    {{ t('side_menu', 'Always displayed') }}
-  </NcButton>
-  <NcButton
-    :variant="is(false, true, false) ? 'primary' : 'seconday'"
-    @click="update(false, true, false)"
-  >
-    {{ t('side_menu', 'Big menu') }}
-  </NcButton>
-  <NcButton
-    :variant="is(false, false, true) ? 'primary' : 'seconday'"
-    @click="update(false, false, true)"
-  >
-    {{ t('side_menu', 'With categories') }}
-  </NcButton>
+  <div class="cm-settings-form-displaypicker">
+    <NcButton
+      :variant="is(false, false, false) ? 'primary' : 'seconday'"
+      @click="update(false, false, false)"
+    >
+      {{ t('side_menu', 'Default') }}
+    </NcButton>
+    <NcButton
+      :variant="is(true, false, false) ? 'primary' : 'seconday'"
+      @click="update(true, false, false)"
+    >
+      {{ t('side_menu', 'Always displayed') }}
+    </NcButton>
+    <NcButton
+      :variant="is(false, true, false) ? 'primary' : 'seconday'"
+      @click="update(false, true, false)"
+    >
+      {{ t('side_menu', 'Big menu') }}
+    </NcButton>
+    <NcButton
+      :variant="is(false, false, true) ? 'primary' : 'seconday'"
+      @click="update(false, false, true)"
+    >
+      {{ t('side_menu', 'With categories') }}
+    </NcButton>
 
-  <p>
-    <img
-      v-if="is(false, false, false)"
-      class="side-menu-display"
-      :src="DefaultImg"
-    />
-    <img
-      v-if="is(true, false, false)"
-      class="side-menu-display"
-      :src="AlwaysDisplayedImg"
-    />
-    <img
-      v-if="is(false, true, false)"
-      class="side-menu-display"
-      :src="TopWideImg"
-    />
-    <img
-      v-if="is(false, false, true)"
-      class="side-menu-display"
-      :src="SideMenuWithCategoriesImg"
-    />
-  </p>
+    <p>
+      <img
+        v-if="is(false, false, false)"
+        :src="DefaultImg"
+      />
+      <img
+        v-if="is(true, false, false)"
+        :src="AlwaysDisplayedImg"
+      />
+      <img
+        v-if="is(false, true, false)"
+        class="side-menu-display"
+        :src="TopWideImg"
+      />
+      <img
+        v-if="is(false, false, true)"
+        :src="SideMenuWithCategoriesImg"
+      />
+    </p>
+  </div>
 </template>
 <script setup>
 import { NcButton } from '@nextcloud/vue'
@@ -82,14 +81,3 @@ const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
   return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories
 }
 </script>
-
-<style scoped>
-button {
-  display: inline-block !important;
-  margin: 2px;
-}
-
-img {
-  max-width: 100%;
-}
-</style>