Adjust settings layout and use underlined inputs

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

@@ -90,16 +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 q-mb-md"
-      style="max-width: 420px;"
+          class="q-pa-md"
         >
           <QCardSection class="q-pa-none">
             <QSelect
               v-model="selectedLanguage"
-          outlined
               emit-value
               map-options
               :label="t('settingsLanguageLabel')"
@@ -110,12 +110,13 @@ useHead(() => ({ title: t('settingsTitle') }));
             </div>
           </QCardSection>
         </QCard>
+      </div>
 
+      <div class="col-12 col-md-8">
         <QCard
           flat
           bordered
           class="q-pa-md"
-      style="max-width: 500px;"
         >
           <QCardSection class="q-pa-none">
             <div class="text-subtitle1 q-mb-md">
@@ -131,7 +132,6 @@ useHead(() => ({ title: t('settingsTitle') }));
                 v-for="field in shortcutFields"
                 :key="field.action"
                 :model-value="shortcutSettingsStore.shortcuts[field.action]"
-            outlined
                 readonly
                 :label="field.label"
               >
@@ -160,5 +160,7 @@ useHead(() => ({ title: t('settingsTitle') }));
             />
           </QCardSection>
         </QCard>
+      </div>
+    </div>
   </QPage>
 </template>