Layout/Style adjustments

wwwroot/css/chat.css

@@ -58,6 +58,10 @@
   border: none;
 }
 
+.chat-page .page-content > * {
+  width: 900px;
+}
+
 #chat {
   flex: 1;
   overflow-y: auto;

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;
 }

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 {

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;

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 {

wwwroot/index.html

@@ -32,13 +32,13 @@
 
 <template id="tpl-dashboard">
   <div class="page dashboard">
+    <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>
@@ -46,6 +46,7 @@
         <div class="card-grid" id="agentCards"></div>
       </section>
     </div>
+  </div>
 </template>
 
 <template id="tpl-session">
@@ -55,6 +56,7 @@
       <h1 id="sessionPageTitle">Neue Session</h1>
       <button id="openChatBtn" disabled>Chat öffnen</button>
     </header>
+    <div class="page-content">
       <div class="form">
         <div class="avatar-section">
           <div class="avatar-preview" id="sessionImagePreview">?</div>
@@ -85,6 +87,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <template id="tpl-agent">
@@ -93,6 +96,7 @@
       <button class="back-btn" data-page="dashboard">←</button>
       <h1 id="agentPageTitle">Neuer Agent</h1>
     </header>
+    <div class="page-content">
       <div class="form">
         <div class="avatar-section">
           <div class="avatar-preview" id="avatarPreview">?</div>
@@ -120,6 +124,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <template id="tpl-chat">
@@ -135,6 +140,7 @@
         </div>
       </div>
     </header>
+    <div class="page-content">
       <div id="chat"></div>
       <div class="meta-bar" id="meta"></div>
       <div id="filePreview" class="file-preview" hidden></div>
@@ -147,6 +153,7 @@
         <button id="send">Senden</button>
       </div>
     </div>
+  </div>
 </template>
 
 <template id="tpl-settings">
@@ -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>