From 7fc131d4fb8d41c0c4a70dd32a4bf7ff15c20fd1 Mon Sep 17 00:00:00 2001 From: David Montero Date: Tue, 18 Aug 2026 04:54:49 +0200 Subject: [PATCH] =?UTF-8?q?feat(editor):=20compact=20file=20explorer=20?= =?UTF-8?q?=E2=80=94=20less=20indent,=20smaller=20icons=20and=20rows,=2015?= =?UTF-8?q?0px=20default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width. --- frontend/src/App.css | 6 +- .../src/components/editor/FileExplorer.css | 80 ++++++++++++++----- .../src/components/editor/FileExplorer.tsx | 7 +- frontend/src/pages/EditorPage.tsx | 7 +- 4 files changed, 71 insertions(+), 29 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 6ef5d8dc..4a476c07 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -673,8 +673,10 @@ body { } /* Tight footer (narrow explorer): the avatar alone identifies the account; - the name is a luxury that costs exactly the width we do not have. */ -@container (max-width: 150px) { + the name is a luxury that costs exactly the width we do not have. The + threshold sits under the explorer's 150px default so the first name shows + out of the box and only goes when the user drags the pane narrower. */ +@container (max-width: 135px) { .explorer-account-footer .header-username-text { display: none; } diff --git a/frontend/src/components/editor/FileExplorer.css b/frontend/src/components/editor/FileExplorer.css index 6b81ad73..e2507fe2 100644 --- a/frontend/src/components/editor/FileExplorer.css +++ b/frontend/src/components/editor/FileExplorer.css @@ -13,20 +13,32 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0 10px; + gap: 4px; + padding: 0 4px 0 6px; height: 46px; color: #9d9d9d; - font-size: 11px; + font-size: 10px; font-weight: 600; - letter-spacing: 0.5px; + letter-spacing: 0.3px; border-bottom: 1px solid #333; flex-shrink: 0; } +/* The title gives way before the actions do: at narrow pane widths the + three buttons must stay reachable, the word can truncate. */ +.file-explorer-title { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .file-explorer-header-actions { display: flex; align-items: center; gap: 2px; + flex-shrink: 0; } .file-explorer-new-btn { @@ -39,8 +51,14 @@ display: flex; align-items: center; justify-content: center; - width: 26px; - height: 26px; + width: 20px; + height: 20px; +} + +.file-explorer-new-btn svg, +.file-explorer-save-btn svg { + width: 16px; + height: 16px; } .file-explorer-new-btn:hover { @@ -58,8 +76,8 @@ display: flex; align-items: center; justify-content: center; - width: 26px; - height: 26px; + width: 20px; + height: 20px; } .file-explorer-save-btn:hover { @@ -91,20 +109,25 @@ .file-explorer-list { flex: 1; overflow-y: auto; - padding: 4px 0; + padding: 2px 0; scrollbar-width: thin; scrollbar-color: #3c3c3c transparent; } +/* Rows are deliberately compact (VS Code density): the explorer is a narrow + pane and every px of padding, indent or icon here is a px the code editor + does not get. */ .file-explorer-item { display: flex; align-items: center; - gap: 6px; - padding: 5px 8px; + gap: 4px; + padding: 3px 6px; cursor: pointer; color: #ccc; border-radius: 3px; - margin: 1px 4px; + margin: 0 2px; + font-size: 11px; + line-height: 16px; white-space: nowrap; overflow: hidden; user-select: none; @@ -124,11 +147,17 @@ } .file-explorer-icon { - font-size: 12px; + display: inline-flex; + align-items: center; flex-shrink: 0; opacity: 0.8; } +.file-explorer-icon svg { + width: 16px; + height: 16px; +} + .file-explorer-name { overflow: hidden; text-overflow: ellipsis; @@ -136,8 +165,8 @@ } .file-explorer-dot { - width: 7px; - height: 7px; + width: 6px; + height: 6px; border-radius: 50%; background: #e8a87c; flex-shrink: 0; @@ -148,7 +177,7 @@ background: #3c3c3c; border: 1px solid var(--color-action-primary); color: #fff; - font-size: 12px; + font-size: 11px; padding: 1px 4px; border-radius: 2px; outline: none; @@ -204,12 +233,12 @@ .fe-board-header { display: flex; align-items: center; - gap: 5px; - padding: 5px 6px 5px 4px; + gap: 4px; + padding: 3px 4px 3px 2px; cursor: pointer; color: #aaa; border-radius: 3px; - margin: 0 4px; + margin: 0 2px; user-select: none; position: relative; } @@ -282,8 +311,8 @@ display: flex; align-items: center; justify-content: center; - width: 20px; - height: 20px; + width: 18px; + height: 18px; flex-shrink: 0; opacity: 0; transition: opacity 0.1s; @@ -294,6 +323,11 @@ opacity: 1; } +.fe-board-new-btn svg { + width: 16px; + height: 16px; +} + .fe-board-new-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; @@ -304,8 +338,10 @@ } .fe-file-item { - /* --fe-depth: nesting level inside the board's folder tree (0 = root). */ - padding-left: calc(26px + var(--fe-depth, 0) * 14px) !important; + /* --fe-depth: nesting level inside the board's folder tree (0 = root). + Root files sit just inside the board header's chevron, not under its + icon — the deeper indent read as wasted margin in a 150px pane. */ + padding-left: calc(16px + var(--fe-depth, 0) * 12px) !important; } /* ── Folder rows ────────────────────────────────────────────────────────── */ diff --git a/frontend/src/components/editor/FileExplorer.tsx b/frontend/src/components/editor/FileExplorer.tsx index 398b969e..1191bfa6 100644 --- a/frontend/src/components/editor/FileExplorer.tsx +++ b/frontend/src/components/editor/FileExplorer.tsx @@ -1113,11 +1113,12 @@ export const FileExplorer: React.FC = ({ onSaveClick, onNewCl