KI-AGENT: Scrollen auf Kommunikationsseite ermöglichen

This commit is contained in:
2026-05-18 17:35:10 +02:00
parent 30b6ffcc20
commit 5fca7792a2

View File

@@ -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>