dsfsdf

public/assets/app.css

@@ -141,29 +141,30 @@ button, input, select {
 
 .panel--dashboard {
   display: grid;
-  gap: 18px;
+  gap: 12px;
+  padding: 18px 20px;
 }
 
 .dashboard-grid {
   display: grid;
   grid-template-columns: minmax(320px, 1.15fr) minmax(320px, 1fr);
-  gap: 18px;
+  gap: 14px;
 }
 
 .dashboard-block {
   display: grid;
-  gap: 16px;
+  gap: 12px;
 }
 
 .dashboard-controls {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
+  gap: 10px 12px;
   align-items: end;
 }
 
 .dashboard-block--library {
-  padding-top: 8px;
+  padding-top: 0;
 }
 
 .field {
@@ -182,7 +183,7 @@ button, input, select {
   border: 1px solid rgba(83, 58, 31, 0.14);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.82);
-  padding: 12px 14px;
+  padding: 10px 12px;
 }
 
 .field input:focus,
@@ -206,7 +207,7 @@ button, input, select {
 
 .library--wide {
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  max-height: 420px;
+  max-height: 280px;
 }
 
 .component-card,
@@ -297,7 +298,7 @@ button, input, select {
 }
 
 .stat-card {
-  padding: 16px;
+  padding: 13px 14px;
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.58);
   border: 1px solid rgba(75, 57, 37, 0.12);
@@ -411,6 +412,13 @@ button, input, select {
   z-index: 2;
 }
 
+.rack-mount-plane {
+  position: relative;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  z-index: 5;
+}
+
 .rack-rail {
   position: relative;
   display: grid;
@@ -494,6 +502,8 @@ button, input, select {
 
 .rack-bay {
   position: relative;
+  grid-column: 2;
+  grid-row: 1;
   overflow: hidden;
   border-radius: 4px;
   background:
@@ -783,9 +793,9 @@ button, input, select {
 }
 
 .subpanel {
-  padding: 16px;
+  padding: 12px;
   display: grid;
-  gap: 12px;
+  gap: 10px;
 }
 
 .subpanel__header {
@@ -810,10 +820,10 @@ button, input, select {
 }
 
 .selection-info {
-  min-height: 46px;
+  min-height: 42px;
   display: flex;
   align-items: center;
-  padding: 12px 14px;
+  padding: 10px 12px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba(83, 58, 31, 0.14);

public/assets/app.js

@@ -203,6 +203,10 @@ function renderRack() {
       <div class="rack-shell__screw rack-shell__screw--bl"></div>
       <div class="rack-shell__screw rack-shell__screw--br"></div>
       <div class="rack-core">
+        <div class="rack-mount-plane" id="rack-mount-plane">
+          <div class="rack-insertion-layer" id="rack-insertion-layer"></div>
+          <div class="rack-items-layer" id="rack-items-layer"></div>
+        </div>
         <div class="rack-rail rack-rail--left">${renderRailScale(rack, "left")}</div>
         <div class="rack-bay" id="rack-bay">
           <div class="rack-bay__ceiling"></div>
@@ -210,8 +214,6 @@ function renderRack() {
           <div class="rack-bay__wall rack-bay__wall--right"></div>
           <div class="rack-bay__back"></div>
           <div class="rack-bay__floor"></div>
-          <div class="rack-insertion-layer" id="rack-insertion-layer"></div>
-          <div class="rack-items-layer" id="rack-items-layer"></div>
         </div>
         <div class="rack-rail rack-rail--right">${renderRailScale(rack, "right")}</div>
       </div>
@@ -220,10 +222,10 @@ function renderRack() {
 
   const layer = document.getElementById("rack-items-layer");
   layer.style.height = "100%";
-  const bay = document.getElementById("rack-bay");
+  const mountPlane = document.getElementById("rack-mount-plane");
-  bay.addEventListener("dragover", handleRackDragOver);
+  mountPlane.addEventListener("dragover", handleRackDragOver);
-  bay.addEventListener("drop", handleRackDrop);
+  mountPlane.addEventListener("drop", handleRackDrop);
-  bay.addEventListener("dragleave", handleRackDragLeave);
+  mountPlane.addEventListener("dragleave", handleRackDragLeave);
 
   const insertionLayer = document.getElementById("rack-insertion-layer");
   insertionLayer.innerHTML = renderInsertionZones(rack);