Matrix-Chat: feste Scrollfläche gegen Layout-Verschiebung

static/styles.css

@@ -252,12 +252,10 @@ button:hover { background: linear-gradient(180deg, #7cbc19, #5e8a12); }
 
 .matrix-list {
   list-style: none;
-  margin: .5rem 0 0;
+  margin: 0;
   padding: 0;
   display: grid;
   gap: .5rem;
-  max-height: 280px;
-  overflow: auto;
 }
 
 .matrix-list li {
@@ -267,6 +265,29 @@ button:hover { background: linear-gradient(180deg, #7cbc19, #5e8a12); }
   padding: .5rem .6rem;
   display: grid;
   gap: .2rem;
+  min-width: 0;
+}
+
+.matrix-body {
+  max-height: 7.5rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.matrix-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.matrix-scroll {
+  margin-top: .5rem;
+  max-height: 320px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: .25rem;
 }
 
 .table-wrap {

templates/dashboard.html

@@ -83,21 +83,23 @@
       {{end}}
     </section>
 
-    <section class="card">
+    <section class="card matrix-card">
       <h2>Matrix-Chat</h2>
       {{if .MatrixEnabled}}
         {{if .MatrixError}}
           <p class="muted">Chat konnte nicht geladen werden: {{.MatrixError}}</p>
         {{else if .MatrixMessages}}
+          <div class="matrix-scroll">
             <ul class="matrix-list">
               {{range .MatrixMessages}}
               <li>
                 <div><strong>{{.Sender}}</strong></div>
-              <div>{{.Body}}</div>
+                <div class="matrix-body">{{.Body}}</div>
                 <div class="muted">{{.Timestamp}}</div>
               </li>
               {{end}}
             </ul>
+          </div>
         {{else}}
           <p class="muted">Keine Nachrichten gefunden.</p>
         {{end}}