client:media doesn't work

[AdrienLemaire]

Astro Info

Astro                    v5.1.7
Node                     v22.12.0
System                   Linux (x64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

According to the doc, we should be able to conditionally call an island or another depending on media queries.

<Layout>
  <Header />
  <Mockup client:media="(min-width: 769px)" />
  <MockupMobile client:media="(max-width: 768px)" />
  <Footer />
</Layout>

But anytime we load code with client:media, the code is displayed regardless of the media query.

What's the expected result?

When the screen width is < 769px, only the MockupMobile version should display.
When the screen width is >= 769px, only the Mockup version should display.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-8hmsxn97

Participation

• I am willing to submit a pull request for this issue (once I understand what the problem is and how to fix it...)

[ascorbic]

I think there's a bit of confusion about what client:media is for. It doesn't hide or show according to the query: it hydrates according to the query. See this demo for an example. If you need to conditionally hide or show, your best bet is to use CSS and client:visible. Closing as this is expected behaviour.

[AdrienLemaire]

I see, I confused hydrating with lazy-fetching. Thanks for the demo for clarification @ascorbic , have a nice day