Fluent: view code dialog

[OEvgeny]

Changelog Entry

• Improved view code dialog UI in Fluent theme with better styling and accessibility, in PR #5337, by @OEvgeny

Description

This PR enhances the view code dialog component in the Fluent theme by implementing a modern, accessible design that aligns with Fluent UI principles.

Design

To account for dark/light theme this PR introduced codeBlockTheme style option. The code block theme should be passed manually if desired e.g. for dark themed Web Chat using Fluent skin pack 'github-dark-default' should be passed.

Specific Changes

• Added codeBlockTheme style option with 'github-light-default' and 'github-dark-default' variants
• [Fluent] Implemented responsive dialog layout with proper spacing and padding
• Improved scrollbar styling for better integration
• Enhanced focus states and keyboard navigation
• Updated test files for UI verification

-

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)