From 286a91204fb0457c7ac4cda829dbac05f49b99b2 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Fri, 27 Feb 2026 17:09:44 +0100
Subject: [PATCH] Layout/Style adjustments

---
 wwwroot/css/chat.css        |   4 +
 wwwroot/css/dashboard.css   |   4 +-
 wwwroot/css/form.css        |   2 -
 wwwroot/css/main.css        |  13 +++
 wwwroot/css/placeholder.css |   7 +-
 wwwroot/index.html          | 157 +++++++++++++++++++-----------------
 6 files changed, 103 insertions(+), 84 deletions(-)

diff --git a/wwwroot/css/chat.css b/wwwroot/css/chat.css
index 957fa33..d40c51c 100644
--- a/wwwroot/css/chat.css
+++ b/wwwroot/css/chat.css
@@ -58,6 +58,10 @@
   border: none;
 }
 
+.chat-page .page-content > * {
+  width: 900px;
+}
+
 #chat {
   flex: 1;
   overflow-y: auto;
diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css
index a35f0e8..b32e079 100644
--- a/wwwroot/css/dashboard.css
+++ b/wwwroot/css/dashboard.css
@@ -1,6 +1,5 @@
-.dashboard {
+.dashboard .page-content {
   padding: calc(var(--s4) * 2);
-  overflow-y: auto;
 }
 
 .dashboard section {
@@ -82,7 +81,6 @@
 }
 
 .card.placeholder {
-  border-style: dashed;
   align-items: center;
   justify-content: center;
 }
diff --git a/wwwroot/css/form.css b/wwwroot/css/form.css
index e85f097..c559c1a 100644
--- a/wwwroot/css/form.css
+++ b/wwwroot/css/form.css
@@ -1,10 +1,8 @@
 .form {
   padding: calc(var(--s4) * 2);
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: var(--s3);
-  max-width: 600px;
 }
 
 .avatar-section {
diff --git a/wwwroot/css/main.css b/wwwroot/css/main.css
index e31fda5..2093cbc 100644
--- a/wwwroot/css/main.css
+++ b/wwwroot/css/main.css
@@ -21,6 +21,19 @@ header {
   overflow: hidden;
 }
 
+.page-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.page-content > * {
+  width: 600px;
+  max-width: 100%;
+}
+
 .back-btn {
   background: none;
   border: none;
diff --git a/wwwroot/css/placeholder.css b/wwwroot/css/placeholder.css
index a0eb164..a07386d 100644
--- a/wwwroot/css/placeholder.css
+++ b/wwwroot/css/placeholder.css
@@ -1,10 +1,9 @@
-.placeholder-content {
+.placeholder {
   flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--s4);
+  gap: var(--s2);
+  padding: calc(var(--s4) * 2);
 }
 
 .placeholder-icon {
diff --git a/wwwroot/index.html b/wwwroot/index.html
index f83eead..fda3e52 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -32,19 +32,20 @@
 
 <template id="tpl-dashboard">
   <div class="page dashboard">
-    <section>
-      <div class="section-header">
-        <h2>Sessions</h2>
-      </div>
-      <div class="card-grid" id="sessionCards"></div>
-    </section>
-
-    <section>
-      <div class="section-header">
-        <h2>Agents</h2>
-      </div>
-      <div class="card-grid" id="agentCards"></div>
-    </section>
+    <div class="page-content">
+      <section>
+        <div class="section-header">
+          <h2>Sessions</h2>
+        </div>
+        <div class="card-grid" id="sessionCards"></div>
+      </section>
+      <section>
+        <div class="section-header">
+          <h2>Agents</h2>
+        </div>
+        <div class="card-grid" id="agentCards"></div>
+      </section>
+    </div>
   </div>
 </template>
 
@@ -55,33 +56,35 @@
       <h1 id="sessionPageTitle">Neue Session</h1>
       <button id="openChatBtn" disabled>Chat öffnen</button>
     </header>
-    <div class="form">
-      <div class="avatar-section">
-        <div class="avatar-preview" id="sessionImagePreview">?</div>
-        <input type="file" id="sessionImageInput" accept="image/*" hidden>
-        <button id="sessionImageBtn">Bild ändern</button>
-        <button id="sessionImageClearBtn">Entfernen</button>
-      </div>
-      <label>Name</label>
-      <input type="text" id="sessionName" placeholder="Name der Session">
-      <label>Beschreibung</label>
-      <textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
-      <label>Agent</label>
-      <select id="agentSelect"></select>
-      <label>Workspace</label>
-      <div class="input-with-btn">
-        <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
-        <button type="button" id="sessionWorkspaceBrowse" class="input-addon-btn">📂</button>
-      </div>
-      <label>Kontext</label>
-      <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
-      <label>Custom-Befehle</label>
-      <div class="custom-commands" id="customCommandsList"></div>
-      <button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
-      <div class="form-actions">
-        <button id="sessionSaveBtn">Speichern</button>
-        <button id="sessionCancelBtn">Abbrechen</button>
-        <button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
+    <div class="page-content">
+      <div class="form">
+        <div class="avatar-section">
+          <div class="avatar-preview" id="sessionImagePreview">?</div>
+          <input type="file" id="sessionImageInput" accept="image/*" hidden>
+          <button id="sessionImageBtn">Bild ändern</button>
+          <button id="sessionImageClearBtn">Entfernen</button>
+        </div>
+        <label>Name</label>
+        <input type="text" id="sessionName" placeholder="Name der Session">
+        <label>Beschreibung</label>
+        <textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
+        <label>Agent</label>
+        <select id="agentSelect"></select>
+        <label>Workspace</label>
+        <div class="input-with-btn">
+          <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
+          <button type="button" id="sessionWorkspaceBrowse" class="input-addon-btn">📂</button>
+        </div>
+        <label>Kontext</label>
+        <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
+        <label>Custom-Befehle</label>
+        <div class="custom-commands" id="customCommandsList"></div>
+        <button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
+        <div class="form-actions">
+          <button id="sessionSaveBtn">Speichern</button>
+          <button id="sessionCancelBtn">Abbrechen</button>
+          <button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
+        </div>
       </div>
     </div>
   </div>
@@ -93,30 +96,32 @@
       <button class="back-btn" data-page="dashboard">←</button>
       <h1 id="agentPageTitle">Neuer Agent</h1>
     </header>
-    <div class="form">
-      <div class="avatar-section">
-        <div class="avatar-preview" id="avatarPreview">?</div>
-        <input type="file" id="avatarInput" accept="image/*" hidden>
-        <button id="avatarBtn">Avatar ändern</button>
-        <button id="avatarClearBtn">Entfernen</button>
-      </div>
-      <label>Name</label>
-      <input type="text" id="agentName" placeholder="Name des Agents">
-      <label>Beschreibung</label>
-      <input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
-      <label>Model</label>
-      <select id="agentModel">
-        <option value="sonnet">Sonnet 4.6</option>
-        <option value="opus">Opus 4.6</option>
-      </select>
-      <label>Persona</label>
-      <textarea id="agentPersona" rows="6" placeholder="Persönlichkeit / Seele des Agents"></textarea>
-      <label>Anweisungen</label>
-      <textarea id="agentInstructions" rows="6" placeholder="Technische Anweisungen"></textarea>
-      <div class="form-actions">
-        <button id="agentSaveBtn">Speichern</button>
-        <button id="agentCancelBtn">Abbrechen</button>
-        <button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
+    <div class="page-content">
+      <div class="form">
+        <div class="avatar-section">
+          <div class="avatar-preview" id="avatarPreview">?</div>
+          <input type="file" id="avatarInput" accept="image/*" hidden>
+          <button id="avatarBtn">Avatar ändern</button>
+          <button id="avatarClearBtn">Entfernen</button>
+        </div>
+        <label>Name</label>
+        <input type="text" id="agentName" placeholder="Name des Agents">
+        <label>Beschreibung</label>
+        <input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
+        <label>Model</label>
+        <select id="agentModel">
+          <option value="sonnet">Sonnet 4.6</option>
+          <option value="opus">Opus 4.6</option>
+        </select>
+        <label>Persona</label>
+        <textarea id="agentPersona" rows="6" placeholder="Persönlichkeit / Seele des Agents"></textarea>
+        <label>Anweisungen</label>
+        <textarea id="agentInstructions" rows="6" placeholder="Technische Anweisungen"></textarea>
+        <div class="form-actions">
+          <button id="agentSaveBtn">Speichern</button>
+          <button id="agentCancelBtn">Abbrechen</button>
+          <button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
+        </div>
       </div>
     </div>
   </div>
@@ -135,16 +140,18 @@
         </div>
       </div>
     </header>
-    <div id="chat"></div>
-    <div class="meta-bar" id="meta"></div>
-    <div id="filePreview" class="file-preview" hidden></div>
-    <div id="refPreview" class="ref-preview" hidden></div>
-    <div class="input-area">
-      <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
-      <button id="explorerBtn" class="file-btn" title="Workspace durchsuchen">📂</button>
-      <button id="fileBtn" class="file-btn" title="Datei anhängen">📎</button>
-      <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
-      <button id="send">Senden</button>
+    <div class="page-content">
+      <div id="chat"></div>
+      <div class="meta-bar" id="meta"></div>
+      <div id="filePreview" class="file-preview" hidden></div>
+      <div id="refPreview" class="ref-preview" hidden></div>
+      <div class="input-area">
+        <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
+        <button id="explorerBtn" class="file-btn" title="Workspace durchsuchen">📂</button>
+        <button id="fileBtn" class="file-btn" title="Datei anhängen">📎</button>
+        <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
+        <button id="send">Senden</button>
+      </div>
     </div>
   </div>
 </template>
@@ -155,7 +162,7 @@
       <button class="back-btn" data-page="dashboard">←</button>
       <h1>Einstellungen</h1>
     </header>
-    <div class="placeholder-content">
+    <div class="page-content placeholder">
       <div class="placeholder-icon">⚙️</div>
       <h2>Einstellungen</h2>
       <p>Hier können diverse Einstellungen getroffen werden.</p>