Compact browser grid cards

- Reduce card padding and gap
- Use fluid width thumbnails/icons instead of fixed 120px
- Fix cards stretching to tallest row height (align-items: start)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

media_server/static/css/styles.css

@@ -1862,7 +1862,7 @@
     gap: 1rem;
     margin-bottom: 1.5rem;
     min-height: 200px;
-    align-items: stretch;
+    align-items: start;
 }
 
 /* Compact Grid */
@@ -2036,13 +2036,13 @@
     background: var(--bg-tertiary);
     border: 1px solid var(--border);
     border-radius: 8px;
-    padding: 1rem;
+    padding: 0.6rem;
     cursor: pointer;
     transition: all 0.2s;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
     position: relative;
 }
 
@@ -2056,8 +2056,8 @@
 
 /* Thumbnail Display */
 .browser-thumbnail {
-    width: 120px;
+    width: 100%;
-    height: 120px;
+    aspect-ratio: 1;
     object-fit: cover;
     border-radius: 6px;
     background: var(--bg-primary);
@@ -2115,8 +2115,8 @@
 
 /* File/Folder Icons */
 .browser-icon {
-    width: 120px;
+    width: 100%;
-    height: 120px;
+    aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -2128,7 +2128,6 @@
 .browser-item-info {
     width: 100%;
     text-align: center;
-    margin-top: auto;
 }
 
 .browser-item-name {