Fix hovering stuff

src/data/layers/factory.tsx

@@ -1238,10 +1238,16 @@ const factory = createLayer(id, () => {
 
     // ------------------------------------------------------------------------------- Tabs
 
+    const hovered = ref(false);
     const componentsList = jsx(() => {
         return (
-            <div class="comp-container">
+            <div class={{ "comp-container": true, hovered: hovered.value }}>
                 <div class="comp-list">
+                    <div
+                        class="comp-list-child"
+                        onPointerenter={() => (hovered.value = true)}
+                        onPointerleave={() => (hovered.value = false)}
+                    >
                         {Object.entries(FACTORY_COMPONENTS).map(value => {
                             const key = value[0] as FactoryCompNames;
                             const item = value[1];
@@ -1270,7 +1276,9 @@ const factory = createLayer(id, () => {
                                             <>
                                                 <br />
                                                 Energy Consumption:{" "}
-                                            {formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)}
+                                                {formatWhole(
+                                                    FACTORY_COMPONENTS[key].energyCost ?? 0
+                                                )}
                                             </>
                                         ) : null}
                                     </div>
@@ -1279,6 +1287,7 @@ const factory = createLayer(id, () => {
                         })}
                     </div>
                 </div>
+            </div>
         );
     });
 

src/data/layers/styles/factory.css

@@ -57,8 +57,6 @@
     border-left: 1px solid var(--foreground);
 }
 
-
-
 .factory-container {
     width: auto;
     top: 113px;
@@ -68,6 +66,7 @@
     position: absolute;
     background-color: var(--raised-background);
     overflow: hidden;
+    z-index: 1;
 }
 
 .info-container {
@@ -100,6 +99,10 @@
     left: 0;
     bottom: 0;
     width: 158px;
+    z-index: -1;
+}
+
+.comp-container.hovered {
     z-index: 1;
 }
 
@@ -124,25 +127,30 @@
 
     z-index: -1;
 }
-.comp-list > .comp:nth-child(2n - 1) .comp-info {
+.comp-list .comp:nth-child(2n - 1) .comp-info {
     right: -85px;
 }
-.comp-list > .comp:hover .comp-info {
+.comp-list .comp:hover .comp-info {
     transform: translateX(calc(20px + 100%));
 }
 
 .comp-list {
     width: 100%;
     height: 100%;
+    overflow-y: overlay;
+    overflow-x: hidden;
+    padding-right: 370px;
+    direction: rtl;
+}
+
+.comp-list-child {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     align-items: flex-start;
     align-content: flex-start;
-    overflow-y: overlay;
-    overflow-x: hidden;
-    padding-right: 500px;
-    pointer-events: none;
+    width: 148px;
+    direction: ltr;
 }
 
 .comp-list::after {
@@ -157,7 +165,7 @@
     z-index: -1;
 }
 
-.comp-list > .comp {
+.comp-list .comp {
     position: relative;
     width: 50px;
     height: 50px;
@@ -165,8 +173,8 @@
     pointer-events: all;
 }
 
-.comp-list > div:nth-child(3)::after,
-.comp-list > div:nth-child(4)::after {
+.comp-list .comp:nth-child(3)::after,
+.comp-list .comp:nth-child(4)::after {
     content: "";
     position: absolute;
     top: calc(100% + 10px);
@@ -175,13 +183,13 @@
     left: 0;
     right: 0;
 }
-.comp-list > div:nth-child(3)::after {
+.comp-list .comp:nth-child(3)::after {
     right: -50px;
 }
-.comp-list > div:nth-child(4)::after {
+.comp-list .comp:nth-child(4)::after {
     left: -50px;
 }
-.comp-list > img.selected:not(.producedItem) {
+.comp-list .comp img.selected:not(.producedItem) {
     transform: translate(-5px, -5px);
     filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007);
 }