From 97f115d28bc6f68822d233abea6cce7b8ffaa73d Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 18 Sep 2025 08:51:30 -0400 Subject: [PATCH] fix: resolve narrow code editor width issue in Label component demos MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes code editor width issue on Label component React demos page by ensuring the .ws-code-editor element takes full width of its container. Fixes #4777 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../components/example/example.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css index 0e646106f2..d0b34976d3 100644 --- a/packages/documentation-framework/components/example/example.css +++ b/packages/documentation-framework/components/example/example.css @@ -2,6 +2,16 @@ --ws-code-editor--tooltip--MaxWidth: 16ch; } +/* Fix for narrow code editor width issue #4777 */ +.ws-code-editor { + width: 100%; + max-width: none; +} + +.ws-code-editor .pf-v6-c-code-editor { + width: 100%; +} + .ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before { --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0; }