diff --git a/public/boardViewer.html b/public/boardViewer.html
index d0b95a5..882841f 100644
--- a/public/boardViewer.html
+++ b/public/boardViewer.html
@@ -19,8 +19,8 @@
font: 11px/1.5 'IBM Plex Mono', 'Cascadia Code', 'Courier New', monospace;
display: flex;
flex-direction: column;
- height: 100vh;
- overflow: hidden;
+ min-height: 100vh;
+ overflow-y: auto;
}
#topbar {
display: flex;
@@ -51,12 +51,63 @@
font-size: 11px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
- #canvas-wrap { flex: 1; position: relative; overflow: hidden; }
+ #canvas-wrap { flex: 1; min-height: 360px; position: relative; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; }
#hint {
position: absolute; bottom: 6px; right: 10px;
font-size: 9px; color: var(--muted); pointer-events: none;
}
+ /* ── Daten-Tabelle ── */
+ #table-wrap {
+ flex-shrink: 0;
+ max-height: 260px;
+ overflow-y: auto;
+ border-top: 1px solid var(--border);
+ background: var(--bg);
+ }
+ .tbl-head {
+ padding: 4px 10px 2px;
+ font-size: 9px;
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: .07em;
+ background: var(--panel);
+ border-bottom: 1px solid var(--border);
+ position: sticky;
+ top: 0;
+ }
+ table.dtbl {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 10px;
+ }
+ table.dtbl th {
+ position: sticky;
+ top: 0;
+ background: var(--panel);
+ color: var(--muted);
+ font-weight: normal;
+ text-align: right;
+ padding: 2px 7px;
+ border-bottom: 1px solid var(--border);
+ white-space: nowrap;
+ }
+ table.dtbl th:first-child,
+ table.dtbl th:nth-child(2) { text-align: left; }
+ table.dtbl td {
+ text-align: right;
+ padding: 1px 7px;
+ border-bottom: 1px solid #111418;
+ white-space: nowrap;
+ }
+ table.dtbl td:first-child,
+ table.dtbl td:nth-child(2) { text-align: left; }
+ table.dtbl tr:hover td { background: #1a1f2b; }
+ .row-1cam td:first-child::before { content: ''; }
+ .cell-hi { color: #fbbf24; } /* amber: trianguliert */
+ .cell-lo { color: #fde68a; } /* hell: nur 2D */
+ .cell-unk { color: #3b82f6; } /* blau: fremd */
+ .cell-mut { color: var(--muted); }