From 5fca7792a249199a9af90354b5912b6233256fa9 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Mon, 18 May 2026 17:35:10 +0200
Subject: [PATCH] =?UTF-8?q?KI-AGENT:=20Scrollen=20auf=20Kommunikationsseit?=
 =?UTF-8?q?e=20erm=C3=B6glichen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/pages/communication/index.vue | 94 +++++++++++++-------------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/frontend/pages/communication/index.vue b/frontend/pages/communication/index.vue
index 745b048..1c2f182 100644
--- a/frontend/pages/communication/index.vue
+++ b/frontend/pages/communication/index.vue
@@ -203,58 +203,59 @@ onMounted(loadMatrixInfo)
 </script>
 
 <template>
-  <div class="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6">
-    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-      <div>
-        <h1 class="text-2xl font-semibold text-highlighted">
-          Kommunikation
-        </h1>
-        <p class="mt-1 text-sm text-muted">
-          Matrix-Verbindung und persönliche Kommunikationsidentität.
-        </p>
+  <div class="min-h-0 flex-1 overflow-y-auto">
+    <div class="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6">
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h1 class="text-2xl font-semibold text-highlighted">
+            Kommunikation
+          </h1>
+          <p class="mt-1 text-sm text-muted">
+            Matrix-Verbindung und persönliche Kommunikationsidentität.
+          </p>
+        </div>
+
+        <UButton
+            icon="i-heroicons-arrow-path"
+            color="neutral"
+            variant="outline"
+            :loading="loading"
+            @click="loadMatrixInfo"
+        >
+          Aktualisieren
+        </UButton>
       </div>
 
-      <UButton
-          icon="i-heroicons-arrow-path"
-          color="neutral"
-          variant="outline"
-          :loading="loading"
-          @click="loadMatrixInfo"
-      >
-        Aktualisieren
-      </UButton>
-    </div>
-
-    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-      <UCard
-          v-for="item in statusItems"
-          :key="item.label"
-          :ui="{ root: 'rounded-lg', body: 'p-4 sm:p-4' }"
-      >
-        <div class="flex items-start gap-3">
-          <UIcon
-              :name="item.icon"
-              class="mt-0.5 size-5 shrink-0"
-              :class="{
+      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <UCard
+            v-for="item in statusItems"
+            :key="item.label"
+            :ui="{ root: 'rounded-lg', body: 'p-4 sm:p-4' }"
+        >
+          <div class="flex items-start gap-3">
+            <UIcon
+                :name="item.icon"
+                class="mt-0.5 size-5 shrink-0"
+                :class="{
                 'text-success': item.color === 'success',
                 'text-error': item.color === 'error',
                 'text-warning': item.color === 'warning',
                 'text-muted': item.color === 'neutral'
               }"
-          />
-          <div class="min-w-0">
-            <p class="text-xs font-medium uppercase text-muted">
-              {{ item.label }}
-            </p>
-            <p class="mt-1 break-words text-sm font-medium text-highlighted">
-              {{ item.value }}
-            </p>
+            />
+            <div class="min-w-0">
+              <p class="text-xs font-medium uppercase text-muted">
+                {{ item.label }}
+              </p>
+              <p class="mt-1 break-words text-sm font-medium text-highlighted">
+                {{ item.value }}
+              </p>
+            </div>
           </div>
-        </div>
-      </UCard>
-    </div>
+        </UCard>
+      </div>
 
-    <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
+      <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
       <div class="space-y-4">
         <UCard :ui="{ root: 'rounded-lg' }">
           <template #header>
@@ -491,9 +492,9 @@ onMounted(loadMatrixInfo)
           </div>
         </div>
       </UCard>
-    </div>
+      </div>
 
-    <UCard :ui="{ root: 'rounded-lg overflow-hidden', body: 'p-0 sm:p-0' }">
+      <UCard :ui="{ root: 'rounded-lg overflow-hidden', body: 'p-0 sm:p-0' }">
       <template #header>
         <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div class="flex min-w-0 items-center gap-2">
@@ -529,6 +530,7 @@ onMounted(loadMatrixInfo)
             sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads allow-modals allow-presentation"
         />
       </div>
-    </UCard>
+      </UCard>
+    </div>
   </div>
 </template>