[Website] Polish

[tobias-tengler]

No description provided.

[Copilot]

Pull request overview

This PR polishes the website-next frontend by refining docs layout/rail behavior, improving reusable UI primitives in the design system, and tightening MDX rendering (notably YouTube embeds and tables).

Changes:

• Replace MDX <Video> embeds with a stricter <YouTubeVideo videoId="..."> pipeline (remark rewrite + optimized poster rendering + updated remote image extraction).
• Expand/standardize design-system primitives (Input/TextArea/FormField/IconButton, improved Dropdown, Table alignment + optional striping) and adopt them in pages.
• Improve docs UX (fixed rails with footer-aware sizing, floating DocsToolbar, TOC scrolling behavior, and minor spacing tweaks across components/pages).

Reviewed changes

Copilot reviewed 52 out of 56 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
website-next/src/remark/youtubeEmbed.mjs	Rewrite standalone YouTube links into <YouTubeVideo> with extracted/validated IDs.
website-next/src/mdx-plugins.ts	Mermaid CSS tweaks (sequence actor styling).
website-next/src/image-optimization/remote.mjs	Update YouTube embed scanning to match <YouTubeVideo videoId="...">.
website-next/src/helpers/extractYouTubeId.ts	Remove now-unused helper (logic moved closer to consumers).
website-next/src/helpers/compileDoc.ts	Update TOC type import to new component location.
website-next/src/design-system/VideoFacade.tsx	Remove legacy facade from design-system.
website-next/src/design-system/Video.tsx	Remove legacy <Video> component.
website-next/src/design-system/Video.stories.tsx	Remove legacy stories for deleted video components.
website-next/src/design-system/TextArea.tsx	Add standardized textarea built on shared FormField chrome.
website-next/src/design-system/TextArea.stories.tsx	Add Storybook coverage for TextArea states.
website-next/src/design-system/Table.tsx	Add alignment + optional striping; adjust table structure/styling.
website-next/src/design-system/Table.stories.tsx	Update stories and add an “Alternating” example.
website-next/src/design-system/Input.tsx	Add standardized input built on shared FormField chrome.
website-next/src/design-system/Input.stories.tsx	Add Storybook coverage for Input states.
website-next/src/design-system/IconButton.tsx	Add reusable icon-only button primitive.
website-next/src/design-system/IconButton.stories.tsx	Add Storybook coverage for IconButton.
website-next/src/design-system/FormField.tsx	Add shared label/error wrapper + shared control classes.
website-next/src/design-system/Dropdown.tsx	Add optional label + introduce DropdownItem abstraction and updated styling.
website-next/src/design-system/Dropdown.stories.tsx	Migrate stories to DropdownItem, add labeled/description variants.
website-next/src/design-system/Button.tsx	Support type/disabled for <button> rendering and disabled styling.
website-next/src/components/YouTubeVideo.tsx	New server component to render optimized posters + facade for YouTube embeds.
website-next/src/components/YouTubeVideo.stories.tsx	Add Storybook coverage for YouTubeVideo.
website-next/src/components/VideoFacade.tsx	New client facade that defers iframe mount until click.
website-next/src/components/TocDrawer.tsx	Use IconButton and tweak sizing/styling.
website-next/src/components/TocActive.tsx	Adjust TOC scroll behavior to track active item more aggressively.
website-next/src/components/TableOfContents.tsx	Rework TOC rail container + internal scroll region.
website-next/src/components/TableOfContents.stories.tsx	Add Storybook entry for TableOfContents.
website-next/src/components/SidebarDrawer.tsx	Add footer-aware CSS var sizing for rails + adopt IconButton.
website-next/src/components/Sidebar.tsx	Prevent horizontal overflow in sidebar nav.
website-next/src/components/ProductSelector.tsx	Adopt new DropdownItem, tweak label typography.
website-next/src/components/PipelineChoiceTabs.tsx	Update Tabs import to design-system path.
website-next/src/components/PackageInstallation.tsx	Switch to design-system component imports.
website-next/src/components/Offering.tsx	New reusable offering card component for services pages.
website-next/src/components/Offering.stories.tsx	Add Storybook coverage for Offering.
website-next/src/components/NotFoundContent.tsx	Minor sizing adjustments for CTA buttons.
website-next/src/components/MobileNav.tsx	Minor sizing adjustment for Launch button.
website-next/src/components/InputChoiceTabs.tsx	Update Tabs import to design-system path.
website-next/src/components/Header.tsx	Minor sizing adjustment for Launch button.
website-next/src/components/Footer.tsx	Spacing/icon sizing tweaks; remove large-screen-only padding.
website-next/src/components/ExampleTabs.tsx	Update Tabs import to design-system path.
website-next/src/components/EditOnGitHub.tsx	New “Edit this page on GitHub” link component for docs.
website-next/src/components/DocsToolbar.tsx	New floating docs toolbar to open sidebar/TOC drawers on smaller screens.
website-next/src/components/DocPageMeta.tsx	New docs “Last updated” metadata component.
website-next/src/components/ContentSection.tsx	Factor shared header markup into a helper component.
website-next/src/components/BlogTeaser.tsx	Typography/spacing refinements for teaser cards.
website-next/mdx-components.tsx	Map MDX <table> to striped Table by default; swap <Video> for <YouTubeVideo>.
website-next/app/globals.css	Remove footer top margin on docs pages using :has([data-docs-layout]).
website-next/app/docs/[...slug]/page.tsx	Point imports to new docs components; tweak grid sizing.
website-next/app/docs/[...slug]/layout.tsx	Add data-docs-layout marker and update component imports.
website-next/app/(content)/services/training/page.tsx	Replace bespoke card markup with reusable Offering component.
website-next/app/(content)/services/support/page.tsx	Adopt design-system Table components and icon-based checkmarks.
website-next/app/(content)/services/support/contact/ContactForm.tsx	Adopt new form primitives and Dropdown; use SolidButton.
website-next/app/(content)/services/page.tsx	Align accent color usage in services cards.
website-next/app/(content)/services/advisory/page.tsx	Replace bespoke card markup with Offering component.
website-next/app/(content)/resources/page.tsx	Align accent color usage in resource cards.
website-next/app/(content)/platform/page.tsx	Align accent color usage in platform cards.

---

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