improve settings components and scss

src/components/settings/form/FormRange.vue

@@ -15,8 +15,12 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
-    <em v-if="prepend">{{ t('side_menu', prepend) }}</em>
+  <div class="cm-settings-form-range">
+    <em
+      class="cm-settings-form-range-prepend"
+      v-if="prepend"
+      >{{ t('side_menu', prepend) }}</em
+    >
 
     <input
       v-model="model"
@@ -25,7 +29,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       :max="max"
     />
 
-    <em v-if="append">{{ t('side_menu', append) }}</em>
+    <em
+      v-if="append"
+      class="cm-settings-form-range-append"
+      >{{ t('side_menu', append) }}</em
+    >
   </div>
 </template>
 
@@ -55,18 +63,3 @@ defineProps({
   },
 })
 </script>
-
-<style scoped>
-input {
-  min-height: auto;
-}
-
-div * {
-  vertical-align: middle;
-}
-
-em + input,
-input + em {
-  margin-left: 10px;
-}
-</style>