diff --git a/index.html b/index.html index 8973f9c..135100e 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,21 @@ #admin-content pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; } #admin-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; } #player-search { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; } + body.debug-layout { max-width: none; margin: 0; padding: .5rem; height: 100vh; overflow: hidden; } + #play-layout.debug-enabled { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; height: calc(100vh - 4rem); } + #play-layout.debug-enabled #play, #play-layout.debug-enabled #debug-panel { min-width: 0; height: 100%; overflow: auto; padding: 1rem; box-sizing: border-box; } + #play-layout.debug-enabled #debug-panel { border-inline-start: 1px solid currentColor; } + #debug-panel h2 { margin-block-start: 0; } + #debug-trace { display: grid; gap: .6rem; } + #debug-trace details { border: 1px solid currentColor; border-radius: .3rem; padding: .5rem; } + #debug-trace summary { cursor: pointer; overflow-wrap: anywhere; } + #debug-trace pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.45 ui-monospace, monospace; } + @media (max-width: 800px) { + body.debug-layout { height: auto; overflow: auto; } + #play-layout.debug-enabled { grid-template-columns: minmax(0, 1fr); height: auto; } + #play-layout.debug-enabled #play { min-height: 55vh; } + #play-layout.debug-enabled #debug-panel { min-height: 45vh; border-inline-start: 0; border-block-start: 1px solid currentColor; } + } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } footer { margin-top: 2rem; border-top: 1px solid; padding-top: .5rem; color: GrayText; font-size: .875rem; } @@ -48,6 +63,7 @@
+
+ +