DS-084: Add container-query layout utilities and examples

[IbrahimIjai]

Context

Reusable dashboard components currently respond mostly to viewport width.
Cards, tables, and stat groups also need to adapt when placed in narrow panels
within a wide desktop viewport.

Scope

• Define named container utilities for inline-size containment.
• Add documented component breakpoints for compact, standard, and wide containers.
• Demonstrate Card, StatGroup, toolbar, and table-toolbar adaptation in the gallery.
• Provide graceful fallback behavior for unsupported or uncontained usage.

Acceptance criteria

• Components respond to their parent container rather than only viewport media queries.
• Container names avoid collisions when components are nested.
• Layout changes do not alter document reading order.
• Examples cover narrow sidebar, half-width panel, and full-width content placement.
• Visual tests verify representative container widths in both themes.

Out of scope

• Replacing every existing responsive utility.
• JavaScript ResizeObserver-based layout switching.

[edrizxabdulganiyu-blip]

@edrizxabdulganiyu-blip has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer, I’ve reviewed the issue description and I’m confident I can work on it effectively. Please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @edrizxabdulganiyu-blip to this issue.

[IFEANYIBRIGHT]

@IFEANYIBRIGHT has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi! I’m a full-stack developer with a strong blockchain background. I’d love to handle this issue and can deliver a clean, reliable solution. Kindly assign it to me.> Hi! I’m a full-stack developer with a strong blockchain background. I’d love to handle this issue and can deliver a clean, reliable solution. Kindly assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @IFEANYIBRIGHT to this issue.

[MiaShayla]

@MiaShayla has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello, I explored the issue, understand the expected outcome, and have a solid implementation plan. I'd appreciate the opportunity to work on this and contribute a reliable solution.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @MiaShayla to this issue.

[Nwapu-TrustJah]

@Nwapu-TrustJah has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hey @maintainer! I'd love to take on this issue and implement container-query layout utilities.
​Allowing components like cards, stat groups, and toolbars to adapt to their parent panel size rather than just the viewport width will make sidebars and multi-column dashboard layouts much more flexible.
Please give me the issue to handle

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nwapu-TrustJah to this issue.

[GazzyLee]

@GazzyLee has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I’m keen to take this on. I’ll introduce named inline-size container utilities and documented compact, standard, and wide breakpoints, then update the gallery to demonstrate responsive Card, StatGroup, toolbar, and table-toolbar layouts across narrow sidebar, half-width, and full-width containers. I’ll also add graceful fallbacks and visual coverage for representative widths in both themes while preserving document reading order.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @GazzyLee to this issue.

[AvatarMiiDe]

@AvatarMiiDe has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Reviewed and clear on the task. I can execute it effectively with attention to detail. Kindly assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AvatarMiiDe to this issue.

[Heazzy500]

@Heazzy500 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

my applications

Hello Maintainer, I’ve reviewed the issue description and I’m confident I can work on it effectively. Please assign it to me.

Hi! I’d love to contribute to this issue. It looks interesting and I’d be happy to take it on if it’s still available.

Hello, I’ve gone through the requirements and I’m confident I can implement a proper solution that matches the acceptance criteria. Kindly assign this issue to me.

Hi Maintainer, I’d like to work on this issue. I have experience handling similar tasks and can start immediately.

Hello, I’m interested in working on this issue and would appreciate being assigned to it. Thank you.

Hi there, I carefully reviewed the issue details and I’m confident I can deliver a clean and efficient solution.

Hello Maintainer, I’d love to take ownership of this issue and submit a high-quality pull request once completed.

Hi, I’m a full-stack Web2 & Web3 developer with open-source contribution experience, and I’d be glad to work on this issue.

Hello, this issue aligns well with my skill set and I’m confident I can resolve it properly. Please assign it to me.

Hi Maintainer! I’m interested in contributing to this task and can ensure timely delivery with clean implementation.

Hello, I’ve thoroughly read the issue description and understand the expected outcome. I’d love to work on it.

Want me to clean these up into one stronger template you can reuse?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Heazzy500 to this issue.

[Komelove]

@Komelove has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi, I'm interested in this issue and have experience with contracts, backend systems, and frontend implementation.
I've reviewed the issue requirements and my plan is to:
• Understand the existing implementation.
Implement the requested changes.
•Add tests where applicable.
•Submit a clean, well-documented PR.
I can start immediately and will provide regular progress updates as I work through the task.
Thanks for considering my application.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Komelove to this issue.

[fairbid01]

@fairbid01 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I will like to work on this issue. Please assign to me. Thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @fairbid01 to this issue.

[Darktan242]

@Darktan242 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I've carefully reviewed the issue and have a clear understanding of the requirements. I'm ready to implement the necessary changes and deliver a clean, well-tested solution that aligns with the project's coding standards and fully satisfies the acceptance criteria. Once completed, I'll submit a pull request for review.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Darktan242 to this issue.