before remake add chat window

src/components/pnBottomSheetDialog.vue

@@ -15,19 +15,30 @@
         max-height: calc(100vh - 48px - var(--tg-content-safe-area-inset-top) - var(--tg-safe-area-inset-top));
       "
       >
-      <div ref="cardHeaderRef" class="flex items-center no-wrap justify-between w100 q-my-none q-pa-md">
+      <div
+        ref="cardHeaderRef"
+        class="flex items-center no-wrap justify-between w100 q-my-none q-pa-md"
+        >
         <q-resize-observer @resize="onHeaderResize" />
-        <div class="flex column q-mx-xs">
-          <span class="text-h6" style="line-height: 1.5rem;">
+        <div class="column q-mx-xs">
+          <span class="text-bold">
             {{ $t(title) }}
           </span>
           <span v-if="caption" class="text-grey text-caption">
             {{ $t(caption) }}
           </span>
         </div>
-        <div class="flex items-center justify-between no-wrap" v-if="!loading">
-          <slot name="btnSlot">
-            <q-btn icon="mdi-close" @click="modelValue = false" flat round />
+        <q-space/>
+        <div
+          v-if="!loading"
+          class="flex items-center justify-between no-wrap" 
+          >
+          <slot name="btn-slot">
+            <q-btn
+              icon="mdi-close"
+              dense flat round 
+              v-close-popup
+            />
           </slot>
         </div>
       </div>
@@ -103,7 +114,7 @@
   interface SizeParams { height: number; width: number }
   const onHeaderResize = (size: SizeParams) => headerHeight.value = size.height
   const onFooterResize = (size: SizeParams) => footerHeight.value = hasFooter.value ? size.height : 0
-  const onInnerBodyResize = (size: SizeParams) => bodyInnerHeight.value = size.height
+  const onInnerBodyResize = (size: SizeParams) => bodyInnerHeight.value = size.height + 32
 
   const handleWindowResize = () => {
     windowHeight.value = window.innerHeight