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],
 }
@@ -149,6 +149,9 @@ importers:
      tailwindcss:
        specifier: ^3.4.14
        version: 3.4.15
+      tailwindcss-safe-area:
+        specifier: ^0.6.0
+        version: 0.6.0(tailwindcss@3.4.15)
      typescript:
        specifier: ~5.6.3
        version: 5.6.3
@@ -6197,6 +6200,15 @@ packages:
      tailwindcss: 3.4.15
    dev: false

+  /tailwindcss-safe-area@0.6.0(tailwindcss@3.4.15):
+    resolution: {integrity: sha512-5PM3CKquzmaa6mow64zWJ0438/yGSqdPfjaXtwNDb31LezNWqFoGPSbvrW12T8iB4EBjeWot+qAA9nbUqqf3sw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      tailwindcss: ^2.0.0 || >=3.0.0
+    dependencies:
+      tailwindcss: 3.4.15
+    dev: true
+
  /tailwindcss@3.4.15:
    resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==}
    engines: {node: '>=14.0.0'}