From 54ab922e12d7244ac7eedc9121256b5053224346 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Wed, 25 Feb 2026 14:23:13 +0100
Subject: [PATCH] Adjust settings layout and use underlined inputs

---
 src/dashboard/scoreko-dev/views/Settings.vue | 134 ++++++++++---------
 1 file changed, 68 insertions(+), 66 deletions(-)

diff --git a/src/dashboard/scoreko-dev/views/Settings.vue b/src/dashboard/scoreko-dev/views/Settings.vue
index e4a622e..5da11ab 100644
--- a/src/dashboard/scoreko-dev/views/Settings.vue
+++ b/src/dashboard/scoreko-dev/views/Settings.vue
@@ -90,75 +90,77 @@ useHead(() => ({ title: t('settingsTitle') }));
       {{ t('settingsDescription') }}
     </div>
 
-    <QCard
-      flat
-      bordered
-      class="q-pa-md q-mb-md"
-      style="max-width: 420px;"
-    >
-      <QCardSection class="q-pa-none">
-        <QSelect
-          v-model="selectedLanguage"
-          outlined
-          emit-value
-          map-options
-          :label="t('settingsLanguageLabel')"
-          :options="languageOptions"
-        />
-        <div class="text-caption text-grey-5 q-mt-sm">
-          {{ t('settingsLanguageHint') }}
-        </div>
-      </QCardSection>
-    </QCard>
+    <div class="row q-col-gutter-lg items-start">
+      <div class="col-12 col-md-4">
+        <QCard
+          flat
+          bordered
+          class="q-pa-md"
+        >
+          <QCardSection class="q-pa-none">
+            <QSelect
+              v-model="selectedLanguage"
+              emit-value
+              map-options
+              :label="t('settingsLanguageLabel')"
+              :options="languageOptions"
+            />
+            <div class="text-caption text-grey-5 q-mt-sm">
+              {{ t('settingsLanguageHint') }}
+            </div>
+          </QCardSection>
+        </QCard>
+      </div>
 
-    <QCard
-      flat
-      bordered
-      class="q-pa-md"
-      style="max-width: 500px;"
-    >
-      <QCardSection class="q-pa-none">
-        <div class="text-subtitle1 q-mb-md">
-          {{ t('settingsShortcutTitle') }}
-        </div>
+      <div class="col-12 col-md-8">
+        <QCard
+          flat
+          bordered
+          class="q-pa-md"
+        >
+          <QCardSection class="q-pa-none">
+            <div class="text-subtitle1 q-mb-md">
+              {{ t('settingsShortcutTitle') }}
+            </div>
 
-        <div class="text-caption text-grey-5 q-mb-md">
-          {{ t('settingsShortcutDescription') }}
-        </div>
+            <div class="text-caption text-grey-5 q-mb-md">
+              {{ t('settingsShortcutDescription') }}
+            </div>
 
-        <div class="column q-gutter-md">
-          <QInput
-            v-for="field in shortcutFields"
-            :key="field.action"
-            :model-value="shortcutSettingsStore.shortcuts[field.action]"
-            outlined
-            readonly
-            :label="field.label"
-          >
-            <template #append>
-              <QBtn
-                flat
-                round
-                dense
-                :icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
-                :color="recordingAction === field.action ? 'negative' : 'primary'"
-                @click="startRecording(field.action)"
-              />
-            </template>
-            <template #hint>
-              {{ recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint }}
-            </template>
-          </QInput>
-        </div>
+            <div class="column q-gutter-md">
+              <QInput
+                v-for="field in shortcutFields"
+                :key="field.action"
+                :model-value="shortcutSettingsStore.shortcuts[field.action]"
+                readonly
+                :label="field.label"
+              >
+                <template #append>
+                  <QBtn
+                    flat
+                    round
+                    dense
+                    :icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
+                    :color="recordingAction === field.action ? 'negative' : 'primary'"
+                    @click="startRecording(field.action)"
+                  />
+                </template>
+                <template #hint>
+                  {{ recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint }}
+                </template>
+              </QInput>
+            </div>
 
-        <QBtn
-          class="q-mt-md"
-          color="primary"
-          outline
-          :label="t('settingsShortcutReset')"
-          @click="shortcutSettingsStore.resetShortcuts"
-        />
-      </QCardSection>
-    </QCard>
+            <QBtn
+              class="q-mt-md"
+              color="primary"
+              outline
+              :label="t('settingsShortcutReset')"
+              @click="shortcutSettingsStore.resetShortcuts"
+            />
+          </QCardSection>
+        </QCard>
+      </div>
+    </div>
   </QPage>
 </template>