add viewport-fit=cover and pb-safe-or-4 for chat from by tailwindcss-safe-area

2024-12-06 09:02:51 +02:00
parent 113012ddc3
commit 2146cd8300
5 changed files with 17 additions and 3 deletions
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"/>
    <title>НаСвязи</title>
    <link rel="manifest" href="/manifest.json" />
    <meta name="apple-mobile-web-app-capable" content="yes">
@@ -65,6 +65,7 @@
    "prettier": "^3.3.3",
    "rollup-plugin-manifest-json": "^1.7.0",
    "tailwindcss": "^3.4.14",
+    "tailwindcss-safe-area": "^0.6.0",
    "typescript": "~5.6.3",
    "unplugin-auto-import": "^0.18.6",
    "unplugin-info": "^1.2.1",
@@ -24,7 +24,7 @@
      <slot name="endOfMessages" :count="messages.length"></slot>
    </div>

-    <div class="flex gap-3 p-4 pt-0 flex-col-reverse">
+    <div class="flex gap-3 px-4 pt-0 flex-col-reverse pb-safe-or-4">
      <!-- Форма отправки сообщений -->
      <form @submit.prevent="sendMessage" class="flex gap-2 items-center" ref="form">
        <InputText
@@ -1,5 +1,6 @@
 import tailwindScrollbar from 'tailwind-scrollbar'
 import tailwindcssPrimeUI from 'tailwindcss-primeui'
+import tailwindcssSafeArea from 'tailwindcss-safe-area'

 /** @type {import('tailwindcss').Config} */
 export default {
@@ -7,5 +8,5 @@ export default {
  theme: {
    extend: {},
  },
-  plugins: [tailwindScrollbar, tailwindcssPrimeUI],
+  plugins: [tailwindScrollbar, tailwindcssPrimeUI, tailwindcssSafeArea],
 }