diff --git a/.changeset/shiny-emus-visit.md b/.changeset/shiny-emus-visit.md new file mode 100644 index 000000000..55dbe2ff9 --- /dev/null +++ b/.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' diff --git a/packages/kit-styled/src/components/modal/modal.tsx b/packages/kit-styled/src/components/modal/modal.tsx index e6580b0ac..67a77389c 100644 --- a/packages/kit-styled/src/components/modal/modal.tsx +++ b/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: {