chore: enables container queries (#2676)

assets/pages/settings.vue

@@ -14,13 +14,13 @@
       </div>
     </section>
 
-    <section class="flex flex-col">
+    <section class="flex flex-col @container">
       <div class="has-underline">
         <h2>{{ $t("settings.display") }}</h2>
       </div>
 
-      <section class="grid-cols-2 gap-4 md:grid">
+      <section class="grid-cols-2 gap-4 @3xl:grid">
-        <div class="flex flex-col gap-2 text-balance md:pr-8">
+        <div class="flex flex-col gap-2 text-balance @3xl:pr-8">
           <toggle v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </toggle>
 
           <toggle v-model="showTimestamp">{{ $t("settings.show-timesamps") }}</toggle>
@@ -93,7 +93,7 @@
           :messages="fakeMessages"
           :visible-keys="keys"
           :last-selected-item="undefined"
-          class="mobile-hidden overflow-hidden rounded-lg border border-base-content/50 shadow"
+          class="hidden overflow-hidden rounded-lg border border-base-content/50 shadow @3xl:block"
         />
       </section>
     </section>

package.json

@@ -36,6 +36,7 @@
   "@iconify-json/octicon": "^1.1.52",
   "@iconify-json/ph": "^1.1.9",
   "@intlify/unplugin-vue-i18n": "^2.0.0",
+  "@tailwindcss/container-queries": "^0.1.1",
   "@tailwindcss/typography": "^0.5.10",
   "@vueuse/components": "^10.7.1",
   "@vueuse/core": "^10.7.1",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   '@intlify/unplugin-vue-i18n':
     specifier: ^2.0.0
     version: 2.0.0(vue-i18n@9.9.0)
+  '@tailwindcss/container-queries':
+    specifier: ^0.1.1
+    version: 0.1.1(tailwindcss@3.4.1)
   '@tailwindcss/typography':
     specifier: ^0.5.10
     version: 0.5.10(tailwindcss@3.4.1)
@@ -1035,6 +1038,14 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.4.1(ts-node@10.9.2)
+    dev: false
+
   /@tailwindcss/typography@0.5.10(tailwindcss@3.4.1):
     resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
     peerDependencies:

tailwind.config.ts

@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 import DaisyUI from "daisyui";
 import Typography from "@tailwindcss/typography";
+import Container from "@tailwindcss/container-queries";
 
 export default {
   future: {
@@ -27,7 +28,7 @@ export default {
       },
     },
   },
-  plugins: [DaisyUI, Typography],
+  plugins: [DaisyUI, Typography, Container],
   daisyui: {
     themes: [],
     base: false,