fix: styled modal alignment (#1104)

* fix: styled modal aligning to either left/top when position set either right/botto

* docs: update modal changes

---------

Co-authored-by: maiieul <[email protected]>

Author: lolzivkovic

.changeset/shiny-emus-visit.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+fix: styled modal aligning to either left/top when position set either right/bottom'

apps/website/src/routes/docs/styled/modal/index.mdx

@@ -45,12 +45,12 @@ export const panelVariants = cva(
       position: {
         center:
           'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
-        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
+        top: 'inset-x-0 top-0 mb-auto mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
         bottom:
-          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
+          'inset-x-0 bottom-0 mb-0 mt-auto rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 ml-0 mr-auto h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
         right:
-          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
+          'inset-y-0 right-0 ml-auto mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
       },
     },
     defaultVariants: {

packages/kit-styled/src/components/modal/modal.tsx

@@ -20,12 +20,12 @@ export const panelVariants = cva(
       position: {
         center:
           'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
-        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
+        top: 'inset-x-0 top-0 mb-auto mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
         bottom:
-          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
+          'inset-x-0 bottom-0 mb-0 mt-auto rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 ml-0 mr-auto h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
         right:
-          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
+          'inset-y-0 right-0 ml-auto mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
       },
     },
     defaultVariants: {