The text boxes showing progress of the underlying ArgyllCMS commands don't wrap the text output, causing the text to spill over the edges horizontally. These boxes need to contain the stdout output and be vertically scrollable in all stages.
Cause of the Issue
Missing Styles for Some Stages: The #targenLog, #printtargLog, and #chartreadLog elements have some individual styling (max-height: 200px, overflow-y: auto, white-space: pre-wrap), but #colprofLog and #profcheckLog have no specific CSS rules applied. As a result, they default to the browser's base <pre> behavior with unbounded height and no scrolling.
Insufficient Wrapping Rules: While white-space: pre-wrap preserves whitespace and allows wrapping on spaces, ArgyllCMS frequently outputs continuous strings of characters (like progress indicators) that lack spaces. Without explicit break rules, these unbroken strings force the container to expand horizontally and spill over the edges.
Inefficient CSS Selectors: Individual IDs are used for styling each stage's log output, making the CSS repetitive and prone to omissions.
Remediation Steps
Consolidate Selectors: In src/styles/main.css, remove the individual ID selectors (#targenLog, #printtargLog, #chartreadLog) and replace them with a generic selector that targets all <pre> tags within .log-container:
.log-containerpre{margin:0;font-family:monospace;font-size:0.9em;color:#ccc;max-height:200px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;/* or word-break: break-all; */}
Apply the Fixes: Adding overflow-wrap: anywhere; ensures that long continuous strings wrap to the next line, preventing horizontal overflow. Moving to a class-based selector automatically applies these scrolling and wrapping behaviors to all stages, including #colprofLog and #profcheckLog.
### Description
The text boxes showing progress of the underlying ArgyllCMS commands don't wrap the text output, causing the text to spill over the edges horizontally. These boxes need to contain the `stdout` output and be vertically scrollable in all stages.
### Cause of the Issue
1. **Missing Styles for Some Stages:** The `#targenLog`, `#printtargLog`, and `#chartreadLog` elements have some individual styling (`max-height: 200px`, `overflow-y: auto`, `white-space: pre-wrap`), but `#colprofLog` and `#profcheckLog` have no specific CSS rules applied. As a result, they default to the browser's base `<pre>` behavior with unbounded height and no scrolling.
2. **Insufficient Wrapping Rules:** While `white-space: pre-wrap` preserves whitespace and allows wrapping on spaces, ArgyllCMS frequently outputs continuous strings of characters (like progress indicators) that lack spaces. Without explicit break rules, these unbroken strings force the container to expand horizontally and spill over the edges.
3. **Inefficient CSS Selectors:** Individual IDs are used for styling each stage's log output, making the CSS repetitive and prone to omissions.
### Remediation Steps
1. **Consolidate Selectors:** In `src/styles/main.css`, remove the individual ID selectors (`#targenLog`, `#printtargLog`, `#chartreadLog`) and replace them with a generic selector that targets all `<pre>` tags within `.log-container`:
```css
.log-container pre {
margin: 0;
font-family: monospace;
font-size: 0.9em;
color: #ccc;
max-height: 200px;
overflow-y: auto;
white-space: pre-wrap;
overflow-wrap: anywhere; /* or word-break: break-all; */
}
```
2. **Apply the Fixes:** Adding `overflow-wrap: anywhere;` ensures that long continuous strings wrap to the next line, preventing horizontal overflow. Moving to a class-based selector automatically applies these scrolling and wrapping behaviors to all stages, including `#colprofLog` and `#profcheckLog`.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Description
The text boxes showing progress of the underlying ArgyllCMS commands don't wrap the text output, causing the text to spill over the edges horizontally. These boxes need to contain the
stdoutoutput and be vertically scrollable in all stages.Cause of the Issue
#targenLog,#printtargLog, and#chartreadLogelements have some individual styling (max-height: 200px,overflow-y: auto,white-space: pre-wrap), but#colprofLogand#profcheckLoghave no specific CSS rules applied. As a result, they default to the browser's base<pre>behavior with unbounded height and no scrolling.white-space: pre-wrappreserves whitespace and allows wrapping on spaces, ArgyllCMS frequently outputs continuous strings of characters (like progress indicators) that lack spaces. Without explicit break rules, these unbroken strings force the container to expand horizontally and spill over the edges.Remediation Steps
src/styles/main.css, remove the individual ID selectors (#targenLog,#printtargLog,#chartreadLog) and replace them with a generic selector that targets all<pre>tags within.log-container:overflow-wrap: anywhere;ensures that long continuous strings wrap to the next line, preventing horizontal overflow. Moving to a class-based selector automatically applies these scrolling and wrapping behaviors to all stages, including#colprofLogand#profcheckLog.