trent_larson/daily-notification-plugin
4
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

fix(test-app): constrain JSON diagnostics output width

Browse Source 
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.
This commit is contained in:
Jose Olarte III
2026-01-05 20:21:48 +08:00
parent edc4082f72
commit 5ae63e6f6d
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
test-apps/daily-notification-test/src/views/StatusView.vue
View File

@@ -520,6 +520,11 @@ export default toNative(StatusView)
font-weight: 600; font-weight: 600;
} }
.diagnostics-json {
min-width: 0;
overflow: hidden;
}
.diagnostics-json h3 { .diagnostics-json h3 {
margin: 0 0 12px 0; margin: 0 0 12px 0;
color: white; color: white;
@@ -537,8 +542,12 @@ export default toNative(StatusView)
font-size: 12px; font-size: 12px;
line-height: 1.4; line-height: 1.4;
overflow-x: auto; overflow-x: auto;
max-height: 300px;
overflow-y: auto; overflow-y: auto;
max-height: 300px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
white-space: pre;
} }
/* Error Section */ /* Error Section */