[bug]: FieldGroup content disappears on viewport resize inside Form (fieldset + container queries + breakpoint)

[BuhayovA]

Describe the bug

Bug Description

FieldGroup content becomes invisible when viewport is resized if all three conditions are met:

1. FieldGroup is inside <fieldset> (Form/FieldSet component)
2. FieldGroup uses @container/field-group (default behavior)
3. Another element inside the same <fieldset> changes display mode on breakpoint (e.g., grid sm:flex)

Content remains in DOM but is not displaid.

Live Reproduction

Live Demo on Vercel - resize browser to < 640px to see the bug

Source Code on GitHub

Open in StackBlitz (but its seems Turbopack still does not have a WebAssembly build currently)

When viewport resizes, the browser cannot properly recalculate container query context inside <fieldset> when another element changes its display mode (NOT SURE!!!)

Affected component/components

FieldSet, FieldGroup, Form

How to reproduce

1. Open the live demo
2. View in desktop viewport (> 640px)
3. Resize browser window to < 640px
4. Expected: Content remains visible
5. Actual: Content disappears (still in DOM, check DevTools)

Minimal Code Example

import { FieldGroup, FieldSet } from "@/components/ui/field";

export default function Page() {
  return (
    <form>
      <FieldSet>
        <FieldGroup>
          <p>This content will disappear on resize</p>
        </FieldGroup>
        
        <div className="grid sm:flex"></div>
      </FieldSet>
    </form>
  );
}

Key insight: Remove className="grid sm:flex" and the bug disappears.

Codesandbox/StackBlitz link

https://shadcn-ui-fieldgroup-issue.vercel.app/

Logs

System Info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:34:05 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6041
  Available memory (MB): 24576
  Available CPU cores: 12
Binaries:
  Node: 22.15.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 10.10.0
Relevant Packages:
  next: 16.0.9
  eslint-config-next: N/A
  react: 19.2.2
  react-dom: 19.2.2
  typescript: 5.9.3
Next.js Config:
  output: N/A

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[7azemaamer]

Thanks for the detailed repro — this is a great write-up.

This looks very similar to container-query + fieldset reflow issues when a sibling
changes display at a breakpoint. I’ll try to reproduce locally and see whether
this is a browser limitation or something we can guard against in FieldGroup.

[7azemaamer]

I’ve opened a PR that fixes this by avoiding container queries directly on
<fieldset> while keeping <legend> spec-compliant and preserving existing
behavior.

PR: #9149

[TANISHQBEDI]

I ran into the same issue and can confirm that removing the empty sibling fixes it (as mentioned above).
In my case, changing container-type also resolves the issue, but the app requires container-type: inline-size, so that’s not an option.
What’s interesting is that writing the container query manually in plain CSS works as expected with inline-size. The issue only appears when using Tailwind’s @container utility.
This suggests the problem may be related to how Tailwind generates/scopes container queries rather than container queries themselves.