padreug
55958a0822
- Adjust the height of the chat container to use dynamic calculations based on viewport height, enhancing the layout for various screen sizes. - Ensure the chat interface maintains a consistent appearance across different devices, improving overall user experience.
22 lines
No EOL
671 B
Vue
22 lines
No EOL
671 B
Vue
<template>
|
|
<div class="container mx-auto p-4 h-[calc(100vh-3.5rem-2rem)] lg:h-[calc(100vh-4rem-2rem)] xl:h-[calc(100vh-5rem-2rem)]">
|
|
<div class="flex flex-col h-full">
|
|
<!-- Page Header -->
|
|
<div class="mb-4">
|
|
<h1 class="text-2xl font-bold">Nostr Chat</h1>
|
|
<p class="text-muted-foreground">
|
|
Chat with other LNBits users using Nostr relays
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Chat Component -->
|
|
<div class="flex-1 border rounded-lg overflow-hidden">
|
|
<ChatComponent />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ChatComponent from '@/components/nostr/ChatComponent.vue'
|
|
</script> |