From 32b0bf7247970e546ea1506eb5b6c57472164133 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 12 Feb 2025 01:29:53 +0100
Subject: [PATCH] fix dialog box background and positioning

---
 src/assets/index.css                       | 18 +++++++++---------
 src/components/ui/dialog/DialogContent.vue |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index 0d076d3..088cb4d 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -78,10 +78,10 @@
 
 @layer utilities {
   .bg-background {
-    background-color: hsl(var(--background) / <alpha-value>);
+    background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
   }
   .bg-foreground {
-    background-color: hsl(var(--foreground) / <alpha-value>);
+    background-color: hsl(var(--foreground) / var(--tw-bg-opacity, 1));
   }
   .bg-card {
     background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
@@ -127,10 +127,10 @@
   }
 
   .text-background {
-    color: hsl(var(--background) / <alpha-value>);
+    color: hsl(var(--background) / var(--tw-text-opacity, 1));
   }
   .text-foreground {
-    color: hsl(var(--foreground) / <alpha-value>);
+    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
   }
   .text-card {
     color: hsl(var(--card) / var(--tw-text-opacity, 1));
@@ -185,13 +185,13 @@
 /* Add support for ring colors */
 @layer utilities {
   .ring-border {
-    --tw-ring-color: hsl(var(--border) / <alpha-value>);
+    --tw-ring-color: hsl(var(--border) / var(--tw-ring-opacity, 1));
   }
   .ring-primary {
-    --tw-ring-color: hsl(var(--primary) / <alpha-value>);
+    --tw-ring-color: hsl(var(--primary) / var(--tw-ring-opacity, 1));
   }
   .ring-background {
-    --tw-ring-color: hsl(var(--background) / <alpha-value>);
+    --tw-ring-color: hsl(var(--background) / var(--tw-ring-opacity, 1));
   }
 }
 
@@ -201,9 +201,9 @@
     border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
   }
   .border-primary {
-    border-color: hsl(var(--primary) / <alpha-value>);
+    border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
   }
   .border-background {
-    border-color: hsl(var(--background) / <alpha-value>);
+    border-color: hsl(var(--background) / var(--tw-border-opacity, 1));
   }
 }
diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index b48723a..5506749 100644
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
     />
     <DialogContentPrimitive
       :class="cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg mx-auto',
         props.class
       )"
     >