Make layout more square

src/main/resources/static/css/styles.css

@@ -463,11 +463,10 @@ body {
 .admin-rail {
     background: rgba(11, 18, 32, 0.92);
     border-right: 1px solid #1f2937;
-    padding: 10px 10px 12px;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 45px rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    height: calc(100vh - 81px);
 }
 
 .rail-header {
@@ -906,13 +905,6 @@ body {
     max-height: calc(48vh - 72px);
 }
 
-.drawer-header {
-    padding: 4px 2px 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
 .control-panel {
     margin-top: 0;
 }
@@ -997,8 +989,6 @@ body {
 .upload-row {
     display: flex;
     align-items: center;
-    gap: 10px;
-    margin: 8px 0 2px;
 }
 
 .file-input-field {
@@ -1011,15 +1001,12 @@ body {
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
-    border: 1px dashed rgba(124, 58, 237, 0.45);
-    border-radius: 10px;
     background: rgba(124, 58, 237, 0.08);
     cursor: pointer;
-    transition: border-color 120ms ease, background 120ms ease;
+    transition: background 120ms ease, background 120ms ease;
 }
 
 .file-input-trigger:hover {
-    border-color: rgba(124, 58, 237, 0.8);
     background: rgba(124, 58, 237, 0.14);
 }
 
@@ -1122,9 +1109,8 @@ body {
 .asset-list {
     display: flex;
     flex-direction: column;
-    gap: 6px;
-    margin-top: 6px;
     padding: 0;
+    margin: 0;
 }
 
 .asset-item {
@@ -1132,9 +1118,8 @@ body {
     flex-direction: column;
     align-items: stretch;
     padding: 8px 10px;
-    border-radius: 9px;
     background: #111827;
-    border: 1px solid #1f2937;
+    border-top: 1px solid #1f2937;
     cursor: pointer;
     gap: 8px;
     font-size: 13px;
@@ -1142,9 +1127,18 @@ body {
     height: 60px;
 }
 
+.asset-item:last-child {
+    border-bottom: 1px solid #1f2937;
+}
+
+.asset-item strong {
+    width: 157px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .asset-item.selected {
-    border-color: #7c3aed;
+    background: #235;
-    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.6);
 }
 
 .asset-item.pending {
@@ -1202,6 +1196,7 @@ body {
     align-items: center;
     gap: 6px;
     padding: 8px 10px;
+    width: 39px;
     border-radius: 8px;
     border: 1px solid rgba(148, 163, 184, 0.25);
     background: rgba(255, 255, 255, 0.04);

src/main/resources/static/js/admin.js

@@ -1084,23 +1084,6 @@ function renderAssetList() {
         meta.appendChild(name);
         meta.appendChild(details);
 
-        const badges = document.createElement('div');
-        badges.className = 'badge-row asset-meta-badges';
-        badges.appendChild(createBadge(getDisplayMediaType(asset)));
-        if (!isAudioAsset(asset)) {
-            badges.appendChild(createBadge(asset.hidden ? 'Hidden' : 'Visible', asset.hidden ? 'danger' : ''));
-            badges.appendChild(createBadge(`Layer ${asset.zIndex ?? 1}`));
-        }
-        const aspectLabel = !isAudioAsset(asset) ? formatAspectRatioLabel(asset) : '';
-        if (aspectLabel) {
-            badges.appendChild(createBadge(aspectLabel, 'subtle'));
-        }
-        const durationLabel = getDurationBadge(asset);
-        if (durationLabel) {
-            badges.appendChild(createBadge(durationLabel, 'subtle'));
-        }
-        meta.appendChild(badges);
-
         const actions = document.createElement('div');
         actions.className = 'actions';
 
@@ -1143,18 +1126,6 @@ function renderAssetList() {
             actions.appendChild(toggleBtn);
         }
 
-        const deleteBtn = document.createElement('button');
-        deleteBtn.type = 'button';
-        deleteBtn.className = 'ghost danger icon-button';
-        deleteBtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
-        deleteBtn.title = 'Delete asset';
-        deleteBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            deleteAsset(asset);
-        });
-
-        actions.appendChild(deleteBtn);
-
         row.appendChild(preview);
         row.appendChild(meta);
         row.appendChild(actions);

src/main/resources/templates/admin.html

@@ -30,12 +30,6 @@
 
     <div class="admin-workspace">
         <aside class="admin-rail">
-            <div class="rail-header">
-                <div>
-                    <p class="eyebrow subtle">Assets</p>
-                    <h3 class="panel-title">Library & uploads</h3>
-                </div>
-            </div>
             <div class="upload-row">
                 <input id="asset-file" class="file-input-field" type="file" accept="image/*,video/*,audio/*" onchange="handleFileSelection(this)" />
                 <label for="asset-file" class="file-input-trigger">
@@ -53,12 +47,6 @@
             </div>
 
             <div id="asset-inspector" class="rail-inspector hidden">
-                <div class="drawer-header">
-                    <div>
-                        <p class="eyebrow subtle">Settings</p>
-                        <h4>Selected asset</h4>
-                    </div>
-                </div>
                 <div class="asset-inspector panel-section">
                     <div class="selected-asset-banner">
                         <div class="selected-asset-main">
@@ -69,6 +57,14 @@
                             <p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
                             <div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
                         </div>
+                        <div class="selected-asset-actions">
+                            <button id="selected-asset-visibility" class="ghost icon-button" type="button" title="Hide asset" disabled>
+                                <i class="fa-solid fa-eye-slash"></i>
+                            </button>
+                            <button id="selected-asset-delete" class="ghost danger icon-button" type="button" title="Delete asset" disabled>
+                                <i class="fa-solid fa-trash"></i>
+                            </button>
+                        </div>
                     </div>
                     <div id="asset-controls-placeholder" class="asset-controls-placeholder">
                         <div id="asset-controls" class="hidden asset-settings">