[BUG] Flex column - horizontal alignment does not take on "s" breakpoint

[charliearaya]

Describe the bug

When the "s" breakpoint is reached I want my button be horizontally centered, although when I use:
<Flex direction="column" gap="16" vertical="center" s={{ horizontal: "center" }}>
the button is still placed on the left. But if I change the code to:
<Flex direction="column" gap="16" vertical="center" s={{ vertical: "center" }}>
then it works for some reason, is something in the code mixed up maybe?

To reproduce

Steps to reproduce the behavior:

1. Check the code

Expected behavior

The property use in connection with the breakpoint should be vertical if I've read the docs correctly.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

Please complete the following information:

• OS: Windows
• Browser: Chrome 144.0.7559.133
• Once UI Version: 1.5.14
• Next.js Version: 16.1.6
• Node.js Version: 20

Code Sample

<Flex direction="column" gap="16" vertical="center" s={{ vertical: "center" }}>
  <Text variant="body-default-m" onBackground="neutral-weak">
    I focus on creating clear, well-structured digital experiences that balance user needs, business goals, and technical constraints.
  </Text>
  <Text variant="body-default-m" onBackground="neutral-weak" paddingBottom="16">
    I collaborate closely with product, engineering, marketing, sales, and external partners, often helping teams align around a shared direction and make confident design decisions.
  </Text>
  <Badge
    id="badge-about-hero"
    title="More about me"
    arrow
    href="/about"
    effect={false}
    borderWidth={2}
    border="brand-alpha-strong"
  />
</Flex>

Additional context

Add any other context about the problem here. For example:
No console errors, it happens every time.

Possible solution

Maybe a typo in the core code?

[charliearaya]

I can also achieve what I want with this code
<Flex direction="column" gap="16" vertical="center" s={{ direction: "column", horizontal: "center" }}>

Why do I have to declare direction: "column" again?

[lorant-one]

Thanks for reporting @charliearaya - I can confirm that on direction="column" (or using <Column>), the horizontal and vertical props apply the opposite classes of what they are supposed to at all breakpoints.

We already have a PR, I'll check it and merge as soon as possible!

[charliearaya]

@lorant-one great! I also noticed that the gap doesnt apply correctly on <Grid> when using the breakpoints s/m, it only applies when used as a direct property of <Grid>, does your fix also fixes this issue?

I want to do something like this:
<Grid columns="4" gap="16" m={{ columns: 2, gap: 24 }} s={{ columns: 1, gap: 32 }} fillWidth>

[lorant-one]

@charliearaya it won't fix this, some properties are still not supported in the breakpoint object, but we'll expand them soon. Until then, you can use inline styles inside the breakpoint object like: xs={{style: {gap: "0.25rem"}}}

[charliearaya]

@charliearaya it won't fix this, some properties are still not supported in the breakpoint object, but we'll expand them soon. Until then, you can use inline styles inside the breakpoint object like: xs={{style: {gap: "0.25rem"}}}

Alright, that's a good workaround, thanks!