From 2989e6e8470472873c8fc493c0d4ba3a4552a793 Mon Sep 17 00:00:00 2001
From: ZDDC <caseywitt@proton.me>
Date: Mon, 15 Jun 2026 10:09:46 -0500
Subject: [PATCH] ux(classifier): stack the folder count below the folder name

The "direct+total folders/files" badge was right-aligned on the folder row;
move it under the name. The name + count now live in a vertical .folder-namebox
(flex column, flex:1), and the row aligns items to the top so the toggle/icon
sit on the name line with the count beneath. Dropped the count's right margin.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 classifier/css/layout.css | 12 +++++++++---
 classifier/js/tree.js     | 12 +++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/classifier/css/layout.css b/classifier/css/layout.css
index da67e8e..e169b22 100644
--- a/classifier/css/layout.css
+++ b/classifier/css/layout.css
@@ -184,7 +184,7 @@
 /* Folder Item */
 .folder-item {
     display: flex;
-    align-items: center;
+    align-items: flex-start;   /* toggle/icon sit on the name line; count drops below */
     padding: 0.5rem;
     cursor: pointer;
     border-radius: var(--radius);
@@ -269,8 +269,15 @@
     color: var(--text-muted);
 }
 
-.folder-name {
+/* Name + count stacked vertically (count below the name, not right-aligned). */
+.folder-namebox {
     flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.folder-name {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -279,7 +286,6 @@
 .folder-count {
     font-size: 11px;
     color: var(--text-muted);
-    margin-left: 0.5rem;
 }
 
 .folder-children {
diff --git a/classifier/js/tree.js b/classifier/js/tree.js
index b24b509..5802e2c 100644
--- a/classifier/js/tree.js
+++ b/classifier/js/tree.js
@@ -336,18 +336,24 @@
             if (agg === 'excluded') item.classList.add('excluded');
         }
 
-        // Folder name
+        // Name + counts stacked vertically: the count badge sits BELOW the name
+        // rather than right-aligned on the row.
+        const namebox = document.createElement('div');
+        namebox.className = 'folder-namebox';
+
         const name = document.createElement('span');
         name.className = 'folder-name';
         name.textContent = folder.name;
-        item.appendChild(name);
+        namebox.appendChild(name);
 
         // Subfolder / file counts (immediate). Greyed via the row's .scanning
         // class until the subtree is fully scanned.
         const count = document.createElement('span');
         count.className = 'folder-count';
         populateCount(count, folder);
-        item.appendChild(count);
+        namebox.appendChild(count);
+
+        item.appendChild(namebox);
         
         // Extract button for ZIP roots
         if (folder.isZipRoot) {