*

1 files changed, 14 insertions, 4 deletions

diff --git a/html/file-system/index.html b/html/file-system/index.html
index 0285c67..397427f 100644
--- a/html/file-system/index.html
+++ b/html/file-system/index.html
@@ -42,9 +42,11 @@
             display: flex;
             align-items: center;
             padding: 0.5em;
-            margin: 0.25em 0;
-            border-radius: 4px;
+            margin: 0;
+            border-radius: 0;
             transition: background-color 0.2s;
+            width: 100%;
+            padding-left: 2em;
         }
         .folder:hover {
             background-color: rgba(0, 0, 0, 0.05);
@@ -59,14 +61,18 @@
         .folder::before {
             content: "📁";
             margin-right: 0.5em;
+            margin-left: -1.5em;
         }
         ul {
             padding-left: 1.5em;
             border-left: 1px solid #e0e0e0;
+            margin: 0;
+            width: calc(100% - 1.5em);
         }
         li {
             margin: 0;
             padding: 0;
+            width: 100%;
         }
         #editor {
             margin-top: 1.25em;
@@ -189,6 +195,7 @@
             padding: 1em;
             margin-top: 1em;
             box-sizing: border-box;
+            overflow: hidden;
         }
 
         .empty-state {
@@ -215,7 +222,10 @@
 
         .root-folder {
             padding: 0.5em;
-            border-radius: 4px;
+            padding-left: 2em;
+            margin: 0;
+            width: 100%;
+            border-radius: 0;
             cursor: pointer;
             transition: background-color 0.2s;
         }
@@ -431,7 +441,7 @@
 </div>
 
 <div id="fileSystemContainer" oncontextmenu="showContextMenu(event, 'root')">
-    <div class="root-folder" onclick="selectFolder('root')">Root</div>
+    <div class="root-folder" onclick="selectFolder('root')">~</div>
     <ul id="fileSystemTree"></ul>
     <div class="empty-state" style="display: none;">
         <div class="empty-state-text">No folders yet</div>