fix(browser): align list columns via subgrid and fix icon sizing

- Switch .browser-list to CSS grid + subgrid so header and rows share
  the same column track widths, eliminating misaligned columns when
  content widths differ between rows.
- Apply matching responsive column overrides at the parent grid level.
- Override root-folder SVG sizing (hardcoded 24x24 in browser.js) so it
  fills the 56px icon box instead of rendering at ~43%.
- Make compact grid icon fill its thumb wrapper so the emoji centers
  instead of being stranded in the top-left corner.
- Remove premature isConnected bail in loadThumbnail; the img element
  is intentionally detached when called from renderBrowserGrid/List.
  Post-await checks already handle navigation-away correctly.

media_server/static/js/browser.js

@@ -537,9 +537,10 @@ async function loadThumbnail(imgElement, fileName) {
     const cacheKey = `${folderId}|${relPath}`;
     try {
         if (!hasCredentials()) return;
-        // If the user navigates away before this fetch resolves, the imgElement
-        // may already be detached. Bail in that case.
-        if (!imgElement.isConnected) return;
+        // Note: the imgElement is intentionally NOT in the DOM yet when
+        // renderBrowserGrid/renderBrowserList call us — it's still inside a
+        // detached wrapper. Don't bail on isConnected here; rely on the
+        // post-await checks below, which correctly catch navigation away.
 
         // Check cache first
         if (thumbnailCache.has(cacheKey)) {