From da24ca249a11b7030d9a71e2427d3f75fdf623f4 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 9 Jan 2024 11:49:56 -0800
Subject: [PATCH] chore: enables container queries  (#2676)

---
 assets/pages/settings.vue |  8 ++++----
 package.json              |  1 +
 pnpm-lock.yaml            | 11 +++++++++++
 tailwind.config.ts        |  3 ++-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 70e695d0..5d5f3e0b 100644
--- a/assets/pages/settings.vue
+++ b/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">
-        <div class="flex flex-col gap-2 text-balance md:pr-8">
+      <section class="grid-cols-2 gap-4 @3xl:grid">
+        <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>
diff --git a/package.json b/package.json
index baa94065..7a7f918c 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8393dae3..08ef5d52 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 89e6fd4f..206066b3 100644
--- a/tailwind.config.ts
+++ b/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,