refactor(sample) refactor the sample component

[desig9stein]

Closes: #105
To test you need this branch IgniteUI/igniteui-angular-samples#3996

• fix fiter input icon position in none chromium browsers
• fix filtering input jumping in firefox

[ChronosSF]

@desig9stein , so far I am seeing the following issues:

Most grid samples don't show their bottom borders

http://localhost:4321/grid/cell-merging

The fit content implementation seems to work only in FF on Windows and latest Chrome

This is how the first calendar sample looks in FF 152.0.5

But in Edge 150.0.4078.65 it still doesn't work. It seems that the approach might be a bit hit and miss:

But after updating Chrome, the calendar now looks okay there (compared to when I showed it to you)

[desig9stein]

@ChronosSF The shadow cutoff occurs because the new Sample component defaults to 16px of padding around the iframe, and in samples with a hardcoded height, we will see this problem.

I can fix this in a few ways:

Option 1 (Preferred): Remove the internal padding from the sample inside the iframe. (Cleanest long-term, but requires refactoring each affected component).

Option 2 (Fastest): Change the Sample component's default padding to 0. Users who want padding can manually pass spacing="sm|md|lg".

Option 3: Manually increase the hardcoded height for each affected sample.

I lean toward Option 1 to keep things clean, but let me know what you think!

[Copilot]

Pull request overview

This PR refactors the MDX Sample component to support new layout/design requirements (Issue #105), including fit-to-content sizing, configurable spacing/alignment, and resizable previews, plus related UI/style adjustments across the docs shell.

Changes:

• Adds fitContent, spacing, position, resizable, noBorder, and noBackground capabilities to Sample, with corresponding iframe wiring (measurement/postMessage) and styling.
• Refactors code-copy button theming into a shared SCSS mixin and aligns copy button variants/styles across code panes.
• Updates docs/playground examples and several layout/search/sidebar styles to address cross-browser spacing/positioning issues.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/styles/global/_variables.scss	Adjusts page layout grid sizing to a responsive minmax range.
src/styles/global/_search-shared.scss	Moves header/footer height styling to better match mobile visibility rules.
src/styles/global/_copy-button.scss	Introduces a reusable mixin for consistent copy-button palette states.
src/styles/global/_code-blocks.scss	Replaces inline copy-button palette rules with the shared mixin.
src/scripts/sample-widget.ts	Adds fit-content sizing + resizable sample wiring (ResizeObserver + postMessage contract).
src/layouts/DocsLayout/DocsLayout.scss	Tweaks responsive layout behavior (desktop-wide section touched).
src/components/mdx/Sample/Sample.scss	Major styling refactor for sample container/layout modes (fit-content, spacing, resizable, etc.).
src/components/mdx/Sample/Sample.astro	Expands Sample API and markup to support new sizing/layout options.
src/components/mdx/Sample/README.md	Updates Sample API documentation to reflect new props/semantics.
src/components/DocsTree/docs-tree.scss	Adjusts tree item label layout.
src/components/DocsSubHeader/DocsSubHeader.scss	Updates subheader spacing.
src/components/DocsSidebar/SidebarFilterInput.scss	Adjusts filter icon spacing for non-Chromium browsers.
src/components/DocsSidebar/DocsSidebar.scss	Updates sidebar scrolling/layout behavior.
playground/src/pages/mock-demo.astro	Simplifies the base mock demo page content.
playground/src/pages/mock-demo-tall.astro	Adds a tall mock page to demonstrate fitContent height growth.
playground/src/pages/mock-demo-responsive.astro	Adds a responsive mock page to demonstrate resizable.
playground/src/pages/mock-demo-avatar.astro	Adds a small-content mock page to demonstrate fitContent + positioning.
playground/src/pages/components/sample.astro	Reworks Sample playground docs into a structured API + live examples page.
playground/src/components/MockSample.astro	Aligns MockSample behavior/markup with the updated Sample component.

Suppressed comments (1)

src/scripts/sample-widget.ts:655

• data.width is only type-checked; NaN/Infinity/negative widths would still be applied when useWidth is true. Add a finite/positive check before passing it into setFitSize().

        setFitSize(iframe, {
          height: data.height,
          width: useWidth && typeof data.width === 'number' ? data.width : undefined,
        });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.