diff --git a/src/components/sidebar/style.scss b/src/components/sidebar/style.scss
index 144b93526..1cf7d0960 100644
--- a/src/components/sidebar/style.scss
+++ b/src/components/sidebar/style.scss
@@ -124,6 +124,10 @@ body.no-animation {
     width: 100%;
     height: 100%;
 
+    &.files {
+      overflow-x: auto;
+    }
+
     > .list {
       width: 100%;
       max-width: 100%;
diff --git a/src/lib/openFolder.js b/src/lib/openFolder.js
index 33bbb7c41..7a91ecfde 100644
--- a/src/lib/openFolder.js
+++ b/src/lib/openFolder.js
@@ -72,7 +72,6 @@ function openFolder(_path, opts = {}) {
 	}
 
 	const $root = collapsableList(title, "folder", {
-		tail: <Tail target={() => $root.$title} />,
 		allCaps: true,
 		ontoggle: () => expandList($root),
 	});
@@ -747,7 +746,6 @@ function appendList($target, $list) {
  */
 function createFolderTile(name, url) {
 	const $list = collapsableList(name, "folder", {
-		tail: <Tail target={() => $list.$title} />,
 		ontoggle: () => expandList($list),
 	});
 	const { $title } = $list;
@@ -768,7 +766,6 @@ function createFileTile(name, url) {
 	const $tile = tile({
 		lead: <span className={helpers.getIconForFile(name)}></span>,
 		text: name,
-		tail: <Tail target={() => $tile} />,
 	});
 	$tile.dataset.url = url;
 	$tile.dataset.name = name;
@@ -783,22 +780,22 @@ function createFileTile(name, url) {
  * @param {HTMLElement} param0.target
  * @returns {HTMLElement}
  */
-function Tail({ target }) {
-	return (
-		<span
-			className="icon more_vert"
-			attr-action="close"
-			onclick={(e) => {
-				e.stopPropagation();
-				e.preventDefault();
-				handleItems({
-					target: target(),
-					type: "contextmenu",
-				});
-			}}
-		></span>
-	);
-}
+// function Tail({ target }) {
+// 	return (
+// 		<span
+// 			className="icon more_vert"
+// 			attr-action="close"
+// 			onclick={(e) => {
+// 				e.stopPropagation();
+// 				e.preventDefault();
+// 				handleItems({
+// 					target: target(),
+// 					type: "contextmenu",
+// 				});
+// 			}}
+// 		></span>
+// 	);
+// }
 
 /**
  * Add file or folder to the list if expanded
diff --git a/src/sidebarApps/files/index.js b/src/sidebarApps/files/index.js
index 42a866290..9b8c3332a 100644
--- a/src/sidebarApps/files/index.js
+++ b/src/sidebarApps/files/index.js
@@ -22,6 +22,7 @@ function initApp(el) {
 	container = el;
 	container.classList.add("files");
 	container.setAttribute("data-msg", strings["open folder"]);
+	container.style.overflowX = "auto";
 	container.addEventListener("click", clickHandler);
 	editorManager.on(
 		["new-file", "int-open-file-list", "remove-file"],
diff --git a/src/sidebarApps/files/style.scss b/src/sidebarApps/files/style.scss
index 30e21dd1c..906d1d647 100644
--- a/src/sidebarApps/files/style.scss
+++ b/src/sidebarApps/files/style.scss
@@ -12,17 +12,88 @@
     }
   }
 
-  .list .icon.more_vert {
-    position: sticky;
-    right: 0;
+  /* Make the container horizontally scrollable */
+  overflow-x: auto !important;
+  max-width: 100%;
+
+  &::-webkit-scrollbar {
+    height: 5px;
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+
+  .list {
+    min-width: 100%;
+    width: max-content;
+    max-width: none;
+  }
+
+  ul {
+    min-width: 100%;
+    width: max-content;
+    overflow-x: visible !important;
+    max-width: none;
+    margin-left: 0;
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
   }
 
-  .tile:not(.light) .icon.more_vert::before {
-    background-color: rgb(153, 153, 255);
-    background-color: var(--primary-color);
-    color: rgb(255, 255, 255);
-    color: var(--primary-text-color);
-    box-shadow: 0 0 5px 0 rgb(153, 153, 255);
-    box-shadow: 0 0 5px 0 var(--primary-color);
+  li {
+    min-width: 100%;
+    width: max-content;
+  }
+
+  .tile {
+    > .text {
+      white-space: nowrap !important;
+      overflow: visible !important;
+      width: max-content !important;
+      text-overflow: clip !important;
+    }
+  }
+
+  /* Add indent guides for folders (excluding first level) */
+  .list.collapsible > ul > .collapsible > ul {
+    position: relative;
+    padding-left: 24px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 14px;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      background: var(--border-color);
+      z-index: 0;
+    }
+
+    /* Add guides for deeper nesting */
+    .collapsible > ul {
+      padding-left: 24px;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 14px;
+        top: 0;
+        height: 100%;
+        width: 1px;
+        background: var(--border-color);
+        z-index: 0;
+      }
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/list.scss b/src/styles/list.scss
index 546b1a227..03471882a 100644
--- a/src/styles/list.scss
+++ b/src/styles/list.scss
@@ -1,277 +1,278 @@
-@import './mixins.scss';
-
-.list {
-  width: 100%;
-
-  &:not(.collapsible) {
-    overflow-y: auto;
-  }
-
-  &.collapsible {
-    &.hidden {
-      ul {
-        display: none;
-      }
-
-      >.tile {
-        >.folder::before {
-          content: '\e92c' !important;
-        }
-
-        >.indicator::before {
-          content: '\e9bd' !important;
-        }
-      }
-    }
-
-    >.tile {
-      position: relative;
-      height: 30px;
-      font-size: 1em;
-
-      background-color: rgba($color: #000000, $alpha: 0.1);
-
-      &.loading {
-        @include linear-loader(30%, 2px);
-      }
-
-      >.folder::before {
-        content: '\e92d';
-      }
-
-      >.indicator::before {
-        content: '\e9a6';
-      }
-
-      .icon {
-        height: 30px;
-        min-width: 30px;
-      }
-    }
-
-    ul {
-      list-style: none;
-      padding-left: 10px;
-      box-sizing: border-box;
-
-      >.tile {
-        height: 30px;
-
-        .icon {
-          height: 28px;
-          min-width: 28px;
-          font-size: 1em;
-        }
-      }
-
-      .collapsible {
-        >.tile {
-          background-color: transparent;
-        }
-      }
-    }
-
-    .icon.lang {
-      padding-right: 5px;
-      font-family: 'Roboto', sans-serif;
-      font-weight: bolder;
-      color: rgb(37, 37, 37);
-      color: var(--secondary-text-color);
-      font-weight: 900;
-      text-transform: uppercase;
-    }
-  }
-
-  >.list-item {
-    display: flex;
-    min-height: 60px;
-    text-decoration: none;
-    margin: auto;
-    box-sizing: border-box;
-
-    &.disabled {
-      pointer-events: none;
-      opacity: 0.8;
-    }
-
-    &.no-transform {
-      .value {
-        text-transform: none !important;
-      }
-    }
-
-    &:not(:last-of-type) {
-      border-bottom: solid 1px rgba(122, 122, 122, 0.227);
-      border-bottom: solid 1px var(--border-color);
-    }
-
-    &:first-child {
-      .container .value {
-        text-transform: none;
-      }
-    }
-
-    .container {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-
-      .text {
-        flex: 1.2;
-        display: flex;
-        align-items: center;
-
-        .info-button {
-          opacity: 0.5;
-          width: fit-content;
-          height: fit-content;
-          margin-left: 10px;
-          font-size: 0.8rem;
-        }
-
-        button {
-          background-color: rgb(51, 153, 255);
-          background-color: var(--button-background-color);
-          color: rgb(255, 255, 255);
-          color: var(--button-text-color);
-          border: none;
-          border-radius: 4px;
-          margin: 0 10px;
-          font-size: 0.6rem;
-          padding: 5px;
-          box-sizing: border-box;
-        }
-
-        span {
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-
-      .value {
-        flex: 0.8;
-        display: flex;
-        align-items: center;
-        opacity: 0.6;
-
-        &.nc {
-          text-transform: none;
-        }
-      }
-    }
-
-    .icon {
-      height: 60px;
-      width: 60px;
-
-      &.no-icon {
-        width: 20px;
-      }
-    }
-
-    .icon {
-      font-size: 1.4em;
-    }
-
-    * {
-      pointer-events: none;
-    }
-
-    [data-action],
-    [action],
-    a {
-      pointer-events: all !important;
-    }
-  }
-}
-
-ul {
-  list-style: none;
-
-  &.list {
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    li {
-      // max-width: 600px;
-      margin: auto;
-      box-sizing: border-box;
-
-      &.tile {
-        .icon {
-          &.file {
-            background-position: center;
-            background-size: 30px;
-          }
-
-          &.folder {
-            color: rgb(206, 206, 53);
-          }
-        }
-
-        .text {
-          span {
-            width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-
-      * {
-        pointer-events: none;
-        overflow: hidden;
-      }
-
-      [data-action],
-      [action],
-      a {
-        pointer-events: all !important;
-        overflow: auto !important;
-      }
-
-      &.tile:active {
-        transition: all 300ms ease;
-        background-color: rgba($color: #000000, $alpha: 0.2);
-      }
-
-      &:last-child {
-        border-bottom: solid 4px rgba(122, 122, 122, 0.227);
-        border-bottom: solid 4px var(--border-color);
-      }
-    }
-
-    li:last-child {
-      border-bottom: none;
-    }
-  }
-}
-
-.list {
-
-  &:empty,
-  &.empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 40px;
-
-    &::after {
-      content: attr(empty-msg);
-      color: rgb(37, 37, 37);
-      color: var(--secondary-text-color);
-      text-align: center;
-      font-weight: 900;
-      background: transparent;
-    }
-  }
-}
-
-.list-item,
-.tile {
-  &:focus {
-    background-color: rgba($color: #000000, $alpha: 0.2);
-  }
-}
\ No newline at end of file
+@import "./mixins.scss";
+
+.list {
+  width: 100%;
+
+  &:not(.collapsible) {
+    overflow-y: auto;
+  }
+
+  &.collapsible {
+    &.hidden {
+      ul {
+        display: none;
+      }
+
+      > .tile {
+        > .folder::before {
+          content: "\e92c" !important;
+        }
+
+        > .indicator::before {
+          content: "\e9bd" !important;
+        }
+      }
+    }
+
+    > .tile {
+      position: relative;
+      height: 30px;
+      font-size: 1em;
+
+      background-color: rgba($color: #000000, $alpha: 0.1);
+
+      &.loading {
+        @include linear-loader(30%, 2px);
+      }
+
+      > .folder::before {
+        content: "\e92d";
+      }
+
+      > .indicator::before {
+        content: "\e9a6";
+      }
+
+      .icon {
+        height: 30px;
+        min-width: 30px;
+      }
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 10px;
+      box-sizing: border-box;
+
+      > .tile {
+        height: 30px;
+
+        .icon {
+          height: 28px;
+          min-width: 28px;
+          font-size: 1em;
+        }
+      }
+
+      .collapsible {
+        > .tile {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .icon.lang {
+      padding-right: 5px;
+      font-family: "Roboto", sans-serif;
+      font-weight: bolder;
+      color: rgb(37, 37, 37);
+      color: var(--secondary-text-color);
+      font-weight: 900;
+      text-transform: uppercase;
+    }
+  }
+
+  > .list-item {
+    display: flex;
+    min-height: 60px;
+    text-decoration: none;
+    margin: auto;
+    box-sizing: border-box;
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.8;
+    }
+
+    &.no-transform {
+      .value {
+        text-transform: none !important;
+      }
+    }
+
+    &:not(:last-of-type) {
+      border-bottom: solid 1px rgba(122, 122, 122, 0.227);
+      border-bottom: solid 1px var(--border-color);
+    }
+
+    &:first-child {
+      .container .value {
+        text-transform: none;
+      }
+    }
+
+    .container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      .text {
+        flex: 1.2;
+        display: flex;
+        align-items: center;
+
+        .info-button {
+          opacity: 0.5;
+          width: fit-content;
+          height: fit-content;
+          margin-left: 10px;
+          font-size: 0.8rem;
+        }
+
+        button {
+          background-color: rgb(51, 153, 255);
+          background-color: var(--button-background-color);
+          color: rgb(255, 255, 255);
+          color: var(--button-text-color);
+          border: none;
+          border-radius: 4px;
+          margin: 0 10px;
+          font-size: 0.6rem;
+          padding: 5px;
+          box-sizing: border-box;
+        }
+
+        .text {
+          span {
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .value {
+        flex: 0.8;
+        display: flex;
+        align-items: center;
+        opacity: 0.6;
+
+        &.nc {
+          text-transform: none;
+        }
+      }
+    }
+
+    .icon {
+      height: 60px;
+      width: 60px;
+
+      &.no-icon {
+        width: 20px;
+      }
+    }
+
+    .icon {
+      font-size: 1.4em;
+    }
+
+    * {
+      pointer-events: none;
+    }
+
+    [data-action],
+    [action],
+    a {
+      pointer-events: all !important;
+    }
+  }
+}
+
+ul {
+  list-style: none;
+
+  &.list {
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    li {
+      // max-width: 600px;
+      margin: auto;
+      box-sizing: border-box;
+
+      &.tile {
+        .icon {
+          &.file {
+            background-position: center;
+            background-size: 30px;
+          }
+
+          &.folder {
+            color: rgb(206, 206, 53);
+          }
+        }
+
+        .text {
+          span {
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      * {
+        pointer-events: none;
+        overflow: hidden;
+      }
+
+      [data-action],
+      [action],
+      a {
+        pointer-events: all !important;
+        overflow: auto !important;
+      }
+
+      &.tile:active {
+        transition: all 300ms ease;
+        background-color: rgba($color: #000000, $alpha: 0.2);
+      }
+
+      &:last-child {
+        border-bottom: solid 4px rgba(122, 122, 122, 0.227);
+        border-bottom: solid 4px var(--border-color);
+      }
+    }
+
+    li:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.list {
+  &:empty,
+  &.empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+
+    &::after {
+      content: attr(empty-msg);
+      color: rgb(37, 37, 37);
+      color: var(--secondary-text-color);
+      text-align: center;
+      font-weight: 900;
+      background: transparent;
+    }
+  }
+}
+
+.list-item,
+.tile {
+  &:focus {
+    background-color: rgba($color: #000000, $alpha: 0.2);
+  }
+}