From 5ae63e6f6d52616a160eda5806384943b20192fb Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Mon, 5 Jan 2026 20:21:48 +0800 Subject: [PATCH] fix(test-app): constrain JSON diagnostics output width The Raw Diagnostics pre element was overflowing its container and causing the entire page to require horizontal scrolling, making field values in the diagnostics info section inaccessible. Added min-width: 0 and overflow: hidden to .diagnostics-json container to allow proper grid constraint propagation. Added max-width: 100%, width: 100%, and box-sizing: border-box to .json-output to ensure it respects container bounds while maintaining horizontal scroll within the pre element itself. --- .../daily-notification-test/src/views/StatusView.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/test-apps/daily-notification-test/src/views/StatusView.vue b/test-apps/daily-notification-test/src/views/StatusView.vue index f7bff7f..c77941f 100644 --- a/test-apps/daily-notification-test/src/views/StatusView.vue +++ b/test-apps/daily-notification-test/src/views/StatusView.vue @@ -520,6 +520,11 @@ export default toNative(StatusView) font-weight: 600; } +.diagnostics-json { + min-width: 0; + overflow: hidden; +} + .diagnostics-json h3 { margin: 0 0 12px 0; color: white; @@ -537,8 +542,12 @@ export default toNative(StatusView) font-size: 12px; line-height: 1.4; overflow-x: auto; - max-height: 300px; overflow-y: auto; + max-height: 300px; + max-width: 100%; + width: 100%; + box-sizing: border-box; + white-space: pre; } /* Error Section */