diff --git a/website/src/playground/index.html b/website/src/playground/index.html index f8a863a..8aef29e 100644 --- a/website/src/playground/index.html +++ b/website/src/playground/index.html @@ -13,10 +13,9 @@
- Loading... +
Loading...
+
-
-
diff --git a/website/src/playground/index.ts b/website/src/playground/index.ts index 12ce6bc..8c49172 100644 --- a/website/src/playground/index.ts +++ b/website/src/playground/index.ts @@ -18,7 +18,7 @@ function domQuery(query: string): T { const editorEl = domQuery('#editor'); -const fileLocation = domQuery('#file-location'); +const fileLocationText = domQuery('#file-location-text'); const listBtn = domQuery('#list-btn'); const renameBtn = domQuery('#rename-btn'); @@ -106,7 +106,7 @@ editorEl.innerHTML = ''; } location.hash = currentFile; - fileLocation.textContent = currentFile; + fileLocationText.textContent = currentFile; const model = fileModels[currentFile]; diff --git a/website/src/playground/styles.scss b/website/src/playground/styles.scss index 64b37b6..04af942 100644 --- a/website/src/playground/styles.scss +++ b/website/src/playground/styles.scss @@ -24,11 +24,21 @@ a, a:visited { font-size: 1.5em; display: flex; width: 50vw; + max-width: 50vw; border-bottom: 1px solid black; user-select: none; #file-location { padding: 0.5em 0; + position: relative; + display: flex; + flex-direction: row; + flex-grow: 1; + overflow-x: auto; + + #file-location-text { + white-space: nowrap; + } } #list-btn {