Settings-Dialog: fester Kopf/Fuß mit scrollendem Mittelteil, Feinschliff

Breite min(48rem, 94vw), Schließen-Kreuz, kräftigerer Rahmen; Kopfzeile
und Aktionsleiste stehen fest, nur der Gruppen-Mittelteil scrollt, wenn
das Fenster niedriger ist als der Inhalt. Todo-Zeile über die volle
Dialogbreite; Aktions-Buttons einheitlich 10.5rem.

src/components/ProjectList.vue

@@ -650,8 +650,10 @@ onUnmounted(() => window.clearInterval(timer));
 
   <div v-if="settings" class="overlay">
     <div class="dialog settings-dialog">
+      <button class="close" :title="$t('projects.cancel')" @click="settings = null">✕</button>
       <h3>{{ $t("projects.terminal", { name: settings.name }) }}</h3>
 
+      <div class="sbody">
       <section class="sgroup">
         <h4 class="eyebrow">{{ $t("projects.groupAppearance") }}</h4>
         <label class="srow">
@@ -745,17 +747,12 @@ onUnmounted(() => window.clearInterval(timer));
 
       <section class="sgroup">
         <h4 class="eyebrow">{{ $t("projects.groupSession") }}</h4>
-        <div class="srow">
-          <span class="slbl">{{ $t("projects.todo") }}</span>
-          <span class="sval">
-            <label class="checkline">
-              <input v-model="settings.todo" type="checkbox" />
-              {{ $t("projects.todoDesc") }}
-            </label>
-          </span>
-          <span class="sacts"></span>
-        </div>
+        <label class="checkline todo-line">
+          <input v-model="settings.todo" type="checkbox" />
+          <span>{{ $t("projects.todo") }} — {{ $t("projects.todoDesc") }}</span>
+        </label>
       </section>
+      </div>
 
       <div class="actions">
         <button @click="settings = null">{{ $t("projects.cancel") }}</button>
@@ -789,9 +786,49 @@ onUnmounted(() => window.clearInterval(timer));
 <style scoped>
 /* Settings-Dialog: festes Grid Label | Wert | Aktionen in drei Gruppen. */
 .settings-dialog {
-  width: 36rem;
-  max-width: 36rem;
-  gap: 0.8rem;
+  position: relative;
+  width: min(48rem, 94vw);
+  max-width: none;
+  /* Kopf und Aktionszeile stehen fest; nur der Mittelteil (.sbody) scrollt,
+     wenn das Fenster niedriger ist als der Inhalt. */
+  max-height: 94vh;
+  overflow: hidden;
+  gap: 0.7rem;
+  border-color: var(--surface2);
+}
+
+.sbody {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  overflow-y: auto;
+  min-height: 0;
+  margin: 0 -0.5rem;
+  padding: 0 0.5rem;
+}
+
+/* Aktions-Buttons gleich breit — ruhige Aktionsspalte; das Schließen-Kreuz
+   ist davon ausgenommen. */
+.settings-dialog .sacts button,
+.settings-dialog .actions button {
+  width: 10.5rem;
+}
+
+.settings-dialog .close {
+  position: absolute;
+  top: 0.7rem;
+  right: 0.7rem;
+  width: 1.8rem;
+  height: 1.8rem;
+  padding: 0;
+  line-height: 1;
+  color: var(--overlay);
+  background: none;
+  border: none;
+}
+
+.settings-dialog .close:hover {
+  color: var(--text);
 }
 
 .sgroup {
@@ -845,6 +882,12 @@ onUnmounted(() => window.clearInterval(timer));
   justify-content: flex-end;
 }
 
+/* Todo-Zeile: volle Dialogbreite, der Text wird nie gekürzt. */
+.todo-line {
+  font-size: 0.85rem;
+  color: var(--subtext);
+}
+
 .spath {
   font-family: var(--mono);
   font-size: 0.75rem;