Repository navigation
fix(viewer): Raw dialog, grid and navbar layout fixes - #625
Merged
Merged
Conversation
Wrap long lines, keep the close button clear of the text, size the dialog to its content, darken the backdrop, and color XML and JSON output. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The top padding was double the bottom to make room for the close button, so the border looked uneven. Use the same padding on all sides and fit a smaller close button inside the top edge. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Names were split mid-word because Bootstrap sets break-all on pre, and wrapped lines lost their nesting. Wrap between words and continue a wrapped line past its own indent. Use a light palette where every token color reaches at least 4.5:1 contrast. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Each refresh replaces every row, which moved focus to the body. Find the focused control again by its row key and class. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A fetch with only a path went to Current, because only From and Count selected Sample. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Autorefresh read localStorage unguarded. Where storage is blocked that throws, which stopped the dialogs and the table from being set up. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
<!DOCTYPE xhtml> put the page in quirks mode. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
At 1024px the Value column was off-screen, and below 768px a Bootstrap no-wrap rule made the table over 11,000px wide. Names now wrap only between words, long values show a few lines until clicked, and header subtables no longer widen the table. On phones the navbar took over half the screen, and a Bootstrap offset clipped the logo and let the tabs cover its registered trademark mark. Pack the navbar into rows and always show the whole logo. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes layout and usability problems in the JavaScript browser view (
styles/viewer.html). No agent C++ changes.Raw dialog
word-break: break-allonprewas splitting names mid-word.textContent, neverinnerHTML.Grid and navbar
.table-responsiveturns off wrapping. It's now 784px at a 400px window, with a minimum width so the columns stay readable.Behavior
localStorageaccess is guarded, so blocked storage no longer stops the page from setting up.<!DOCTYPE xhtml>becomes<!DOCTYPE html>, indemo/styles/viewer.htmltoo. The page was in quirks mode.Testing
Checked in a browser against the published
mtconnect/agent2.8.0.4 image, with thisstyles/folder mounted and the demo Okuma and Mazak adapters feeding it. I measured the layout at 400, 1024 and 1280px in Chromium.Not tested:
src/changed.localStorageguard with storage actually blocked.democompose stack. I only checked the Mazak and Okuma Twin links on a phone-width navbar by adding them to the live page.🤖 Generated with Claude Code