bug: gcds-fieldset seems to break responsive (narrow) layouts with gcds-select

[simberman-gc]

Prerequisites | Prérequis

• I have read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
• I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
• I have searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.

GC Design System Components Package and Version | Paquet et version des composants de Système de design GC

0.26.3

Current Behavior | Comportement observé

If you put a gcds-select with very wide content inside a gcds-fieldset and make your viewport very narrow (or set it to "iPhone SE mode" in developer tools), you will see that the entire gcds-fieldset overflows the viewport on the right side. Demo in a stackblitz here.

Inside the inspector, you can alleviate the problem by adding width: 100%; text-overflow: clip; to the "select" inside the shadow root of the gcds-select. This might not be a desirable way to fix the problem however since the issue only appears when using a fieldset :)

Expected Behavior | Comportement attendu

The contents of the gcds-fieldset should not overflow the right edge of the viewport.

System Info | Information sur le système

Vue 3.4. Observed in Edge on Windows.

Steps to Reproduce | Étapes pour reproduire le bogue

Please review the stackblitz here.

Code Reproduction URL | URL de reproduction du code

Demo in a stackblitz here.

Additional Information | Informations supplémentaires

Thanks for the good work :)

[simberman-gc]

You can also "solve" the problem by setting min-inline-size: auto on the fieldset inside the shadow root of the gcds-fieldset

[ethanWallace]

Hey @simberman-gc We just released v0.27.0 of the components package which should contain the fix you provided. Thank you!