Reorganize settings view into single sectioned card

src/dashboard/scoreko-dev/views/Settings.vue

@@ -90,14 +90,16 @@ useHead(() => ({ title: t('settingsTitle') }));
       {{ t('settingsDescription') }}
     </div>
 
-    <div class="row q-col-gutter-lg items-start">
-      <div class="col-12 col-md-4">
     <QCard
       flat
       bordered
-          class="q-pa-md"
+      class="q-pa-md settings-card"
     >
-          <QCardSection class="q-pa-none">
+      <QCardSection class="q-pa-none q-mb-lg">
+        <div class="text-subtitle1 q-mb-sm">
+          {{ t('settingsLanguageLabel') }}
+        </div>
+
         <QSelect
           v-model="selectedLanguage"
           emit-value
@@ -105,23 +107,31 @@ useHead(() => ({ title: t('settingsTitle') }));
           :label="t('settingsLanguageLabel')"
           :options="languageOptions"
         />
+
         <div class="text-caption text-grey-5 q-mt-sm">
           {{ t('settingsLanguageHint') }}
         </div>
       </QCardSection>
-        </QCard>
-      </div>
 
-      <div class="col-12 col-md-8">
+      <QSeparator class="q-mb-lg" />
-        <QCard
+
-          flat
-          bordered
-          class="q-pa-md"
-        >
       <QCardSection class="q-pa-none">
-            <div class="text-subtitle1 q-mb-md">
+        <div class="row items-center justify-between q-mb-sm">
+          <div class="text-subtitle1">
             {{ t('settingsShortcutTitle') }}
           </div>
+          <QBtn
+            round
+            dense
+            flat
+            color="primary"
+            icon="restart_alt"
+            :aria-label="t('settingsShortcutReset')"
+            @click="shortcutSettingsStore.resetShortcuts"
+          >
+            <QTooltip>{{ t('settingsShortcutReset') }}</QTooltip>
+          </QBtn>
+        </div>
 
         <div class="text-caption text-grey-5 q-mb-md">
           {{ t('settingsShortcutDescription') }}
@@ -150,17 +160,13 @@ useHead(() => ({ title: t('settingsTitle') }));
             </template>
           </QInput>
         </div>
-
-            <QBtn
-              class="q-mt-md"
-              color="primary"
-              outline
-              :label="t('settingsShortcutReset')"
-              @click="shortcutSettingsStore.resetShortcuts"
-            />
       </QCardSection>
     </QCard>
-      </div>
-    </div>
   </QPage>
 </template>
+
+<style scoped>
+.settings-card {
+  max-width: 720px;
+}
+</style>