From fc91ee168fbdf3accaa14a221967c49febcbdf56 Mon Sep 17 00:00:00 2001
From: Andrew Morris <voltrevo@gmail.com>
Date: Mon, 27 Mar 2023 19:40:09 +1100
Subject: [PATCH] Scroll filename on overflow

---
 website/src/playground/index.html  |  5 ++---
 website/src/playground/index.ts    |  4 ++--
 website/src/playground/styles.scss | 10 ++++++++++
 3 files changed, 14 insertions(+), 5 deletions(-)

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 @@
     <div id="file-menu">
       <div id="list-btn" class="icon-btn ph-list"></div>
       <div id="file-location">
-        Loading...
+        <div id="file-location-text">Loading...</div>
+        <div id="rename-btn" class="icon-btn disabled ph-pencil-simple"></div>
       </div>
-      <div id="rename-btn" class="icon-btn disabled ph-pencil-simple"></div>
-      <div class="grow-spacer"></div>
       <div id="add-btn" class="icon-btn ph-file-plus"></div>
       <div id="restore-btn" class="icon-btn ph-clock-counter-clockwise"></div>
       <div id="delete-btn" class="icon-btn disabled ph-trash"></div>
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<T = HTMLElement>(query: string): T {
 
 const editorEl = domQuery('#editor');
 
-const fileLocation = domQuery<HTMLSelectElement>('#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 {