diff --git a/src/index.html b/src/index.html
index 412a76c..a3bd3cc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -975,6 +975,21 @@
       justify-content: space-between;
       gap: 8px;
       text-align: left;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    .layerItem > span:first-child {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .layerItem > span:last-child {
+      flex-shrink: 0;
+      color: var(--muted);
+      font-size: .78rem;
     }
 
     .layerItem.active {
@@ -3394,7 +3409,9 @@
         const item = document.createElement('button');
         item.type = 'button';
         item.className = `layerItem${layer.id === state.selectedLayerId ? ' active' : ''}`;
-        item.innerHTML = `<span>${layer.name || layer.type}</span><span>${layer.type}</span>`;
+        const rawName = layer.name || layer.type;
+        const displayName = rawName.length > 32 ? rawName.slice(0, 29) + '...' : rawName;
+        item.innerHTML = `<span title="${rawName}">${displayName}</span><span>${layer.type}</span>`;
         item.addEventListener('click', () => {
           state.selectedLayerId = layer.id;
           render();