From 6aad21c82dd90ecfc35714fdc657dae93a0d1ef9 Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 22:47:52 -0600
Subject: [PATCH 1/8] feat(viewer): fix Raw dialog layout and add syntax
 coloring

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>
---
 styles/mtc-app.js | 79 ++++++++++++++++++++++++++++++++++++++++++++---
 styles/viewer.css | 51 ++++++++++++++++++++++++------
 2 files changed, 116 insertions(+), 14 deletions(-)

diff --git a/styles/mtc-app.js b/styles/mtc-app.js
index 799d0aab..ec5d2176 100644
--- a/styles/mtc-app.js
+++ b/styles/mtc-app.js
@@ -142,6 +142,78 @@ function setupAutorefresh() {
   })
 }
 
+// Raw output coloring. Built from spans with textContent so the document is never parsed as HTML.
+const XML_TOKENS =
+  /(<!--[\s\S]*?-->)|(<\?[\s\S]*?\?>)|(<\/?)([\w:.-]+)((?:\s+[\w:.-]+\s*=\s*(?:"[^"]*"|'[^']*'))*)(\s*\/?>)|([^<]+)|(<)/g
+const XML_ATTRS = /(\s+)([\w:.-]+)(\s*=\s*)("[^"]*"|'[^']*')/g
+const JSON_TOKENS =
+  /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}[\],:]/g
+
+function tok(parent, cls, text) {
+  if (!text) return
+  if (!cls) return parent.append(text)
+  const span = document.createElement('span')
+  span.className = 'tok-' + cls
+  span.textContent = text
+  parent.append(span)
+}
+
+function highlightXml(text) {
+  const out = document.createDocumentFragment()
+  let last = 0
+  for (const m of text.matchAll(XML_TOKENS)) {
+    tok(out, null, text.slice(last, m.index))
+    last = m.index + m[0].length
+    if (m[1]) tok(out, 'comment', m[1])
+    else if (m[2]) tok(out, 'decl', m[2])
+    else if (m[4]) {
+      tok(out, 'punct', m[3])
+      tok(out, 'tag', m[4])
+      let end = 0
+      for (const a of m[5].matchAll(XML_ATTRS)) {
+        tok(out, null, a[1])
+        tok(out, 'attr', a[2])
+        tok(out, 'punct', a[3])
+        tok(out, 'str', a[4])
+        end = a.index + a[0].length
+      }
+      tok(out, null, m[5].slice(end))
+      tok(out, 'punct', m[6])
+    } else if (m[7]) tok(out, m[7].trim() ? 'text' : null, m[7])
+    else tok(out, 'punct', m[8])
+  }
+  tok(out, null, text.slice(last))
+  return out
+}
+
+function highlightJson(text) {
+  const out = document.createDocumentFragment()
+  let last = 0
+  for (const m of text.matchAll(JSON_TOKENS)) {
+    tok(out, null, text.slice(last, m.index))
+    last = m.index + m[0].length
+    if (m[1]) {
+      tok(out, m[2] ? 'key' : 'str', m[1])
+      tok(out, 'punct', m[2])
+    } else if (m[3]) tok(out, 'lit', m[3])
+    else if (/^[-\d]/.test(m[0])) tok(out, 'num', m[0])
+    else tok(out, 'punct', m[0])
+  }
+  tok(out, null, text.slice(last))
+  return out
+}
+
+function showRaw(pre, text, format) {
+  const trimmed = text.trimStart()
+  if (format === 'json' || trimmed.startsWith('{') || trimmed.startsWith('[')) {
+    pre.replaceChildren(highlightJson(text))
+  } else if (trimmed.startsWith('<')) {
+    pre.replaceChildren(highlightXml(text))
+  } else {
+    pre.textContent = text
+  }
+}
+
 function setupDialogs() {
   $('help').addEventListener('click', () => $('help-dialog').showModal())
   $('raw').addEventListener('click', async () => {
@@ -149,10 +221,9 @@ function setupDialogs() {
     pre.textContent = 'Loading...'
     $('raw-dialog').showModal()
     try {
-      pre.textContent = await fetchDocument(
-        window.location.pathname + window.location.search,
-        $('format').value
-      )
+      const format = $('format').value
+      const text = await fetchDocument(window.location.pathname + window.location.search, format)
+      showRaw(pre, text, format)
     } catch (err) {
       pre.textContent = err.message
     }
diff --git a/styles/viewer.css b/styles/viewer.css
index 3c07b8b9..2ab9ec0b 100644
--- a/styles/viewer.css
+++ b/styles/viewer.css
@@ -137,26 +137,29 @@ dialog {
   max-width: 60em;
   border: 1px solid #ccc;
   border-radius: 6px;
+  position: fixed;
+  padding: 3em 2em 1.5em;
 }
 
+/* Raw dialog: sized to its content, close button above the text, long lines wrap */
 dialog.mtc-wide {
   width: 90vw;
-  height: 80vh;
+  max-width: 90em;
+  max-height: 85vh;
 }
 
-dialog pre {
-  max-height: 65vh;
-  overflow: auto;
+dialog.mtc-wide[open] {
+  display: flex;
+  flex-direction: column;
 }
 
-dialog {
-  position: fixed;
-  padding: 1.5em 2em 1em;
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.55);
 }
 
 .mtc-close {
   position: absolute;
-  top: 0.25em;
+  top: 0.3em;
   right: 0.5em;
   border: none;
   background: none;
@@ -171,10 +174,38 @@ dialog {
   color: #000;
 }
 
-dialog.mtc-wide pre {
-  margin-top: 0.5em;
+dialog pre {
+  margin: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
 }
 
+dialog.mtc-wide pre {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 1em;
+  border: none;
+  border-radius: 4px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* Raw output colors */
+.tok-punct { color: #808080; }
+.tok-tag { color: #4fc1ff; }
+.tok-attr { color: #9cdcfe; }
+.tok-str { color: #ce9178; }
+.tok-num { color: #b5cea8; }
+.tok-lit { color: #569cd6; }
+.tok-key { color: #9cdcfe; }
+.tok-text { color: #dcdcaa; }
+.tok-comment { color: #6a9955; font-style: italic; }
+.tok-decl { color: #c586c0; }
+
 /* Header and detail subtables scroll inside their row instead of widening the page */
 .mtc-scroll {
   overflow-x: auto;

From 1aa7961d00238d7a6dda0027b7053d097de87c29 Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 23:12:46 -0600
Subject: [PATCH 2/8] fix(viewer): equalize Raw dialog padding

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>
---
 styles/viewer.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/styles/viewer.css b/styles/viewer.css
index 2ab9ec0b..ac7488f5 100644
--- a/styles/viewer.css
+++ b/styles/viewer.css
@@ -146,6 +146,14 @@ dialog.mtc-wide {
   width: 90vw;
   max-width: 90em;
   max-height: 85vh;
+  /* Equal border on all sides; the close button fits inside the top edge */
+  padding: 2em;
+}
+
+dialog.mtc-wide .mtc-close {
+  top: 0.15em;
+  right: 0.4em;
+  font-size: 1.5em;
 }
 
 dialog.mtc-wide[open] {

From 9805a9a7175cc92a2e08ae5d035d8aad192a4b77 Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 23:49:59 -0600
Subject: [PATCH 3/8] fix(viewer): make the Raw dialog light and readable

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>
---
 styles/mtc-app.js | 33 +++++++++++++++++++++++++++++++--
 styles/viewer.css | 38 ++++++++++++++++++++++++--------------
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/styles/mtc-app.js b/styles/mtc-app.js
index ec5d2176..4d40dcc4 100644
--- a/styles/mtc-app.js
+++ b/styles/mtc-app.js
@@ -203,12 +203,41 @@ function highlightJson(text) {
   return out
 }
 
+// How far a wrapped line continues past its own indent, in characters
+const HANG = 4
+
+// Tokens can span lines, so each one is split at its line breaks into one block per line
+function intoLines(tokens) {
+  const out = document.createDocumentFragment()
+  let line = null
+  const startLine = () => {
+    line = document.createElement('div')
+    line.className = 'mtc-line'
+    out.append(line)
+  }
+  startLine()
+  for (const node of [...tokens.childNodes]) {
+    node.textContent.split('\n').forEach((part, i) => {
+      if (i > 0) startLine()
+      if (!part) return
+      const piece = node.cloneNode(false)
+      piece.textContent = part
+      line.append(piece)
+    })
+  }
+  for (const block of out.children) {
+    const indent = block.textContent.length - block.textContent.trimStart().length
+    block.style.setProperty('--hang', indent + HANG + 'ch')
+  }
+  return out
+}
+
 function showRaw(pre, text, format) {
   const trimmed = text.trimStart()
   if (format === 'json' || trimmed.startsWith('{') || trimmed.startsWith('[')) {
-    pre.replaceChildren(highlightJson(text))
+    pre.replaceChildren(intoLines(highlightJson(text)))
   } else if (trimmed.startsWith('<')) {
-    pre.replaceChildren(highlightXml(text))
+    pre.replaceChildren(intoLines(highlightXml(text)))
   } else {
     pre.textContent = text
   }
diff --git a/styles/viewer.css b/styles/viewer.css
index ac7488f5..b39d1e78 100644
--- a/styles/viewer.css
+++ b/styles/viewer.css
@@ -186,33 +186,43 @@ dialog pre {
   margin: 0;
   overflow: auto;
   white-space: pre-wrap;
-  overflow-wrap: anywhere;
+  /* Bootstrap sets break-all on pre, which splits names mid-word */
+  word-break: normal;
+  overflow-wrap: break-word;
   tab-size: 2;
 }
 
+/* A wrapped Raw line continues just past its own indent, so the nesting stays easy to follow.
+   The limit keeps deeply nested lines readable in a narrow window. */
+.mtc-line {
+  min-height: 1.5em;
+  padding-left: min(var(--hang), 40%);
+  text-indent: calc(-1 * min(var(--hang), 40%));
+}
+
 dialog.mtc-wide pre {
   flex: 1 1 auto;
   min-height: 0;
   padding: 1em;
-  border: none;
+  border: 1px solid #d0d7de;
   border-radius: 4px;
-  background: #1e1e1e;
-  color: #d4d4d4;
+  background: #f6f8fa;
+  color: #24292f;
   font-size: 13px;
   line-height: 1.5;
 }
 
 /* Raw output colors */
-.tok-punct { color: #808080; }
-.tok-tag { color: #4fc1ff; }
-.tok-attr { color: #9cdcfe; }
-.tok-str { color: #ce9178; }
-.tok-num { color: #b5cea8; }
-.tok-lit { color: #569cd6; }
-.tok-key { color: #9cdcfe; }
-.tok-text { color: #dcdcaa; }
-.tok-comment { color: #6a9955; font-style: italic; }
-.tok-decl { color: #c586c0; }
+.tok-punct { color: #57606a; }
+.tok-tag { color: #116329; }
+.tok-attr { color: #0550ae; }
+.tok-str { color: #a40e26; }
+.tok-num { color: #953800; }
+.tok-lit { color: #8250df; }
+.tok-key { color: #0550ae; }
+.tok-text { color: #24292f; }
+.tok-comment { color: #57606a; font-style: italic; }
+.tok-decl { color: #8250df; }
 
 /* Header and detail subtables scroll inside their row instead of widening the page */
 .mtc-scroll {

From 893a219d1ebb9f6e8a2fb14270490f9096366c8b Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 23:49:59 -0600
Subject: [PATCH 4/8] fix(viewer): keep keyboard focus across autorefresh

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>
---
 styles/mtc-app.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/styles/mtc-app.js b/styles/mtc-app.js
index 4d40dcc4..65e7a94d 100644
--- a/styles/mtc-app.js
+++ b/styles/mtc-app.js
@@ -52,11 +52,27 @@ function notice(message) {
   return h('p', { class: 'mtc-notice mtc-error', role: 'status' }, message)
 }
 
+// Rendering replaces every row, so a focused control is found again by its row's key and its class
+function focusedControl(container) {
+  const active = document.activeElement
+  if (!container.contains(active)) return null
+  const key = active.closest('tr')?.dataset.key
+  return key && active.classList.length ? { key, cls: active.classList[0] } : null
+}
+
+function restoreFocus(container, focus) {
+  if (!focus) return
+  const row = container.querySelector('tr[data-key="' + CSS.escape(focus.key) + '"]')
+  row?.querySelector('.' + focus.cls)?.focus({ preventScroll: true })
+}
+
 function render(embedded) {
   const container = $('main-container')
   try {
     const root = decode(embedded)
+    const focus = focusedControl(container)
     container.replaceChildren(renderDocument(root))
+    restoreFocus(container, focus)
     linkModel(root)
   } catch (err) {
     container.replaceChildren(notice(err.message))

From e60d7bad80fa05cbe3d3d933ebe13d8d8b853614 Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 23:49:59 -0600
Subject: [PATCH 5/8] fix(viewer): stay on Sample when fetching a path

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>
---
 styles/mtc-app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/mtc-app.js b/styles/mtc-app.js
index 65e7a94d..f92d2d4c 100644
--- a/styles/mtc-app.js
+++ b/styles/mtc-app.js
@@ -127,7 +127,7 @@ function setupForm() {
     event.preventDefault()
     const query = new URLSearchParams()
     for (const id of ['path', 'from', 'count']) if ($(id).value) query.set(id, $(id).value)
-    const sample = query.has('from') || query.has('count')
+    const sample = tab === 'sample' || query.has('from') || query.has('count')
     const qs = query.toString()
     window.location.assign(prefix + (sample ? '/sample' : '/current') + (qs ? '?' + qs : ''))
   })

From d5e298e068cb0162bd66a4afc08b8b7606df720d Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 23:49:59 -0600
Subject: [PATCH 6/8] fix(viewer): guard all access to browser storage

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>
---
 styles/mtc-app.js | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/styles/mtc-app.js b/styles/mtc-app.js
index f92d2d4c..b64e78ca 100644
--- a/styles/mtc-app.js
+++ b/styles/mtc-app.js
@@ -133,27 +133,36 @@ function setupForm() {
   })
 }
 
-// The format for the Raw dialog, remembered between pages
-function setupFormat() {
-  const select = $('format')
-  let saved = null
+// Settings are remembered between pages when the browser allows it. Storage access throws when it
+// is blocked, and the page has to work without it.
+function loadSetting(name) {
+  try {
+    return localStorage.getItem(name)
+  } catch {
+    return null
+  }
+}
+
+function saveSetting(name, value) {
   try {
-    saved = localStorage.getItem('mtc-format')
+    localStorage.setItem(name, value)
   } catch {}
+}
+
+// The format for the Raw dialog
+function setupFormat() {
+  const select = $('format')
+  const saved = loadSetting('mtc-format')
   select.value = saved in FORMATS ? saved : 'xml'
-  select.addEventListener('change', () => {
-    try {
-      localStorage.setItem('mtc-format', select.value)
-    } catch {}
-  })
+  select.addEventListener('change', () => saveSetting('mtc-format', select.value))
 }
 
 function setupAutorefresh() {
   const button = $('autorefresh')
-  if (localStorage.getItem('mtc-autorefresh') === 'on') button.classList.add('active')
+  if (loadSetting('mtc-autorefresh') === 'on') button.classList.add('active')
   button.addEventListener('click', () => {
     button.classList.toggle('active')
-    localStorage.setItem('mtc-autorefresh', button.classList.contains('active') ? 'on' : '')
+    saveSetting('mtc-autorefresh', button.classList.contains('active') ? 'on' : '')
     scheduleRefresh()
   })
 }

From 7515f7fa79b132f4a8b2b3bd62b972230fa48fc5 Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 23:50:00 -0600
Subject: [PATCH 7/8] fix(viewer): use a valid doctype

<!DOCTYPE xhtml> put the page in quirks mode.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 demo/styles/viewer.html | 2 +-
 styles/viewer.html      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/styles/viewer.html b/demo/styles/viewer.html
index 8f89798d..272ade5a 100644
--- a/demo/styles/viewer.html
+++ b/demo/styles/viewer.html
@@ -1,4 +1,4 @@
-<!DOCTYPE xhtml>
+<!DOCTYPE html>
 <!--
   Copyright 2009-2026, AMT – The Association For Manufacturing Technology ("AMT")
   All rights reserved.
diff --git a/styles/viewer.html b/styles/viewer.html
index 1c2731b9..0f498291 100644
--- a/styles/viewer.html
+++ b/styles/viewer.html
@@ -1,4 +1,4 @@
-<!DOCTYPE xhtml>
+<!DOCTYPE html>
 <!--
   Copyright 2009-2026, AMT – The Association For Manufacturing Technology ("AMT")
   All rights reserved.

From af440e39309ce2567cb2cce757143aa22d4f8262 Mon Sep 17 00:00:00 2001
From: Max Harris <15605269+skibum1869@users.noreply.github.com>
Date: Thu, 5 Nov 2026 23:50:00 -0600
Subject: [PATCH 8/8] fix(viewer): fit the grid and navbar to the window

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>
---
 demo/styles/viewer.html |   2 +-
 styles/mtc-views.js     |  57 +++++++++++++-----
 styles/viewer.css       | 125 ++++++++++++++++++++++++++++++++++++++++
 styles/viewer.html      |   2 +-
 4 files changed, 171 insertions(+), 15 deletions(-)

diff --git a/demo/styles/viewer.html b/demo/styles/viewer.html
index 272ade5a..ba076c78 100644
--- a/demo/styles/viewer.html
+++ b/demo/styles/viewer.html
@@ -62,7 +62,7 @@
     </nav>
 
     <div class="container-fluid page-container">
-      <div id="main-container" class="table-responsive stickytable-container"></div>
+      <div id="main-container" class="stickytable-container"></div>
     </div>
 
     <footer class="mtc-footer">
diff --git a/styles/mtc-views.js b/styles/mtc-views.js
index 8a43e95c..2da4b741 100644
--- a/styles/mtc-views.js
+++ b/styles/mtc-views.js
@@ -24,6 +24,29 @@ const INDENT_EM = 1.1
 // survives the re-render that autorefresh does.
 const collapsed = new Set()
 
+// Values longer than this show a few lines until clicked. Same keys, for the same reason.
+const LONG_VALUE = 120
+const expanded = new Set()
+
+function valueContent(text, key) {
+  if (!text || text.length <= LONG_VALUE) return text
+  const button = h(
+    'button',
+    {
+      type: 'button',
+      class: 'mtc-long',
+      title: 'Show or hide the whole value',
+      'aria-expanded': String(expanded.has(key)),
+    },
+    h('span', {}, text)
+  )
+  button.addEventListener('click', () => {
+    if (!expanded.delete(key)) expanded.add(key)
+    button.setAttribute('aria-expanded', String(expanded.has(key)))
+  })
+  return button
+}
+
 // Pre-order walk that reports the depth and a stable key for each node, like the stylesheet's `//*`
 function* walk(node, depth = 0, key = node.name) {
   yield { node, depth, key }
@@ -37,6 +60,14 @@ function* walk(node, depth = 0, key = node.name) {
   }
 }
 
+// Lets a name wrap only between its words: after an underscore or before a capital. <wbr> adds no
+// characters, so copying the name still gives the exact name.
+function nameCell(text) {
+  if (!text) return h('td', { class: 'mtc-name' })
+  const parts = text.replace(/(_)|([a-z0-9])(?=[A-Z])/g, '$1$2\0').split('\0')
+  return h('td', { class: 'mtc-name' }, parts.flatMap((part, i) => (i ? [h('wbr', {}), part] : [part])))
+}
+
 // Rows carry their depth, so hiding a branch hides the rows below it until one is as shallow
 function rowAttrs(depth, key, cls) {
   return { class: cls || false, 'data-depth': depth, 'data-key': key }
@@ -149,12 +180,12 @@ function probeRows(root) {
         'tr',
         rowAttrs(depth, key, PROBE_BOLD.has(node.name) && 'mtc-bold'),
         elementCell(node.name, depth, node.children.length > 0),
-        h('td', {}, a.id),
-        h('td', {}, a.name),
-        h('td', {}, a.category),
-        h('td', {}, a.type),
-        h('td', {}, a.subType),
-        h('td', {}, value),
+        nameCell(a.id),
+        nameCell(a.name),
+        nameCell(a.category),
+        nameCell(a.type),
+        nameCell(a.subType),
+        h('td', {}, valueContent(value, key)),
         h('td', {}, a.units)
       )
     )
@@ -209,11 +240,11 @@ function streamRows(root) {
         'tr',
         rowAttrs(depth, key, STREAM_BOLD.has(label) && 'mtc-bold'),
         elementCell(label, depth, node.children.length > 0),
-        h('td', {}, node.attrs.dataItemId),
-        h('td', {}, node.attrs.name),
+        nameCell(node.attrs.dataItemId),
+        nameCell(node.attrs.name),
         h('td', {}, timestamp && h('span', { title: timestamp }, timestamp.substring(11, 21))),
         h('td', { class: node.name === 'Entry' ? 'mtc-right' : false }, sequence),
-        h('td', { class: 'mtc-value-' + value.replace(/[^A-Za-z]/g, '') }, streamDisplay(node, value))
+        h('td', { class: 'mtc-value-' + value.replace(/[^A-Za-z]/g, '') }, valueContent(streamDisplay(node, value), key))
       )
     )
     if (node.name === 'Header') rows.push(detail(depth, attrTable(6, node)))
@@ -232,11 +263,11 @@ function assetRows(root) {
         'tr',
         rowAttrs(depth, key, node.name === 'Header' && 'mtc-bold'),
         elementCell(node.name, depth, node.children.length > 0),
-        h('td', {}, a.assetId || a.id),
-        h('td', {}, a.name),
-        h('td', {}, a.type),
+        nameCell(a.assetId || a.id),
+        nameCell(a.name),
+        nameCell(a.type),
         h('td', {}, a.timestamp),
-        h('td', {}, node.text)
+        h('td', {}, valueContent(node.text, key))
       )
     )
     if (node.name === 'Header') rows.push(detail(depth, attrTable(6, node)))
diff --git a/styles/viewer.css b/styles/viewer.css
index b39d1e78..8d077975 100644
--- a/styles/viewer.css
+++ b/styles/viewer.css
@@ -227,6 +227,7 @@ dialog.mtc-wide pre {
 /* Header and detail subtables scroll inside their row instead of widening the page */
 .mtc-scroll {
   overflow-x: auto;
+  contain: inline-size;
 }
 
 .mtc-scroll > .subtable {
@@ -243,6 +244,130 @@ dialog.mtc-wide pre {
   padding: 1px 8px;
 }
 
+/* Long values wrap so the Value column stays on screen. Names stay whole: the Element column because
+   its indent already takes the width, and ids and names because they only break between words. */
+.table > tbody > tr > td {
+  overflow-wrap: anywhere;
+}
+
+.table > tbody > tr > td:first-child,
+.table > tbody > tr > td.mtc-name {
+  overflow-wrap: normal;
+}
+
+/* Long values show a few lines until clicked. The width limit stops one long value claiming the
+   width of the whole table. */
+.mtc-long {
+  display: block;
+  max-width: 24em;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.mtc-long > span {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.mtc-long[aria-expanded='true'] > span {
+  display: block;
+}
+
+/* Phones: logo and tabs share a row, and the query form packs into rows instead of a stack */
+@media (max-width: 767px) {
+  nav > .container-fluid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  nav > .container-fluid::before,
+  nav > .container-fluid::after {
+    display: none;
+  }
+
+  /* Bootstrap pulls the header out by 15px here, which clips the logo and lets the tabs cover its
+     registered trademark mark. The whole logo always shows. */
+  .container-fluid > .navbar-header {
+    flex: none;
+    margin: 0;
+  }
+
+  .navbar-brand {
+    padding: 5px 6px;
+  }
+
+  .navbar-nav {
+    display: flex;
+    flex: 1 1 0;
+    margin: 0;
+  }
+
+  .navbar-nav.mtc-links {
+    flex: 1 1 100%;
+    margin: 0;
+  }
+
+  .navbar-nav > li {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+
+  .navbar-nav > li > a {
+    padding: 8px 4px;
+  }
+
+  .navbar-form {
+    flex: 1 1 100%;
+    margin: 0;
+    padding: 6px;
+    border: 0;
+    box-shadow: none;
+  }
+
+  .navbar-form .form-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin: 0;
+  }
+
+  .navbar-form .form-control,
+  .navbar-form .btn {
+    width: auto;
+    margin: 0;
+  }
+
+  .navbar-form .mtc-path {
+    flex: 1 1 100%;
+    width: auto;
+    margin: 0;
+  }
+
+  .navbar-form .mtc-small {
+    flex: 1 1 5em;
+    width: 5em;
+    margin: 0;
+  }
+
+  .navbar-form .mtc-format {
+    margin: 0;
+  }
+
+  /* Six columns do not fit a phone, so the table scrolls sideways instead of crushing them */
+  .table {
+    min-width: 56em;
+  }
+}
+
 /* The copyright line stays visible below the scrolling table */
 :root {
   --footer-height: 26px;
diff --git a/styles/viewer.html b/styles/viewer.html
index 0f498291..9e079167 100644
--- a/styles/viewer.html
+++ b/styles/viewer.html
@@ -58,7 +58,7 @@
     </nav>
 
     <div class="container-fluid page-container">
-      <div id="main-container" class="table-responsive stickytable-container"></div>
+      <div id="main-container" class="stickytable-container"></div>
     </div>
 
     <footer class="mtc-footer">