Make components list handle overflowing

src/data/layers/Factory.vue

@@ -26,7 +26,7 @@ onMounted(() => {
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 148px;
+    left: 158px;
     right: 0;
     touch-action: none;
 }

src/data/layers/factory.tsx

@@ -625,9 +625,6 @@ const factory = createLayer(id, () => {
     });
     const isMouseHoverShown = ref(false);
 
-    const isComponentHover = ref(false);
-    const whatIsHovered = ref<FactoryCompNames | "">("");
-
     const compSelected = ref<FactoryCompNames>("cursor");
     const components: Persistent<{ [key: string]: FactoryComponent }> = persistent({});
     const compInternalData: Record<string, FactoryInternal> = {};
@@ -1193,13 +1190,6 @@ const factory = createLayer(id, () => {
         compHovered.value = undefined;
     }
 
-    function onComponentMouseEnter(name: FactoryCompNames | "") {
-        whatIsHovered.value = name;
-        isComponentHover.value = true;
-    }
-    function onComponentMouseLeave() {
-        isComponentHover.value = false;
-    }
     function onCompClick(name: FactoryCompNames) {
         compSelected.value = name;
     }
@@ -1249,56 +1239,41 @@ const factory = createLayer(id, () => {
     // ------------------------------------------------------------------------------- Tabs
 
     const componentsList = jsx(() => {
-        const componentIndex = Math.floor(
-            Math.max(Object.keys(FACTORY_COMPONENTS).indexOf(whatIsHovered.value), 0) / 2
-        );
         return (
             <div class="comp-container">
-                <div
-                    class={{
-                        "comp-info": true,
-                        active: isComponentHover.value
-                    }}
-                    style={{
-                        top: componentIndex * 70 + 10 + "px"
-                    }}
-                >
-                    {whatIsHovered.value === "" ? undefined : (
-                        <>
-                            <h3>
-                                {FACTORY_COMPONENTS[whatIsHovered.value].name + " "}
-                                <HotkeyVue hotkey={hotkeys[whatIsHovered.value]} />
-                            </h3>
-                            <br />
-                            {unref(FACTORY_COMPONENTS[whatIsHovered.value].description)}
-                            {FACTORY_COMPONENTS[whatIsHovered.value].energyCost ?? 0 ? (
-                                <>
-                                    <br />
-                                    Energy Consumption:{" "}
-                                    {formatWhole(
-                                        FACTORY_COMPONENTS[whatIsHovered.value].energyCost ?? 0
-                                    )}
-                                </>
-                            ) : null}
-                        </>
-                    )}
-                </div>
                 <div class="comp-list">
                     {Object.entries(FACTORY_COMPONENTS).map(value => {
                         const key = value[0] as FactoryCompNames;
                         const item = value[1];
                         return (
-                            <div>
+                            <div class="comp">
                                 <img
                                     src={item.imageSrc}
                                     class={{ selected: compSelected.value === key }}
-                                    onMouseenter={() => onComponentMouseEnter(key)}
-                                    onMouseleave={() => onComponentMouseLeave()}
                                     onClick={() => onCompClick(key)}
                                 />
                                 {item.extraImage == null ? null : (
                                     <img src={item.extraImage} class="producedItem" />
                                 )}
+                                <div
+                                    class={{
+                                        "comp-info": true
+                                    }}
+                                >
+                                    <h3>
+                                        {FACTORY_COMPONENTS[key].name + " "}
+                                        <HotkeyVue hotkey={hotkeys[key]} />
+                                    </h3>
+                                    <br />
+                                    {unref(FACTORY_COMPONENTS[key].description)}
+                                    {FACTORY_COMPONENTS[key].energyCost ?? 0 ? (
+                                        <>
+                                            <br />
+                                            Energy Consumption:{" "}
+                                            {formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)}
+                                        </>
+                                    ) : null}
+                                </div>
                             </div>
                         );
                     })}

src/data/layers/styles/factory.css

@@ -99,17 +99,18 @@
     top: 0;
     left: 0;
     bottom: 0;
-    width: 148px;
+    width: 158px;
     z-index: 1;
 }
 
 .comp-info {
     position: absolute;
-    right: 10px;
+    top: 0;
+    right: -10px;
     padding: 5px 10px;
 
     width: max-content;
-    max-width: 300px;
+    max-width: 320px;
 
     background: var(--background);
     border-radius: var(--border-radius);
@@ -123,7 +124,10 @@
 
     z-index: -1;
 }
-.comp-info.active {
+.comp-list > .comp:nth-child(2n - 1) .comp-info {
+    right: -85px;
+}
+.comp-list > .comp:hover .comp-info {
     transform: translateX(calc(20px + 100%));
 }
 
@@ -131,28 +135,51 @@
     width: 100%;
     height: 100%;
     display: flex;
-    border-right: solid 2px var(--locked);
     flex-wrap: wrap;
     justify-content: space-evenly;
     align-items: flex-start;
     align-content: flex-start;
-    background: var(--raised-background);
+    overflow-y: overlay;
+    overflow-x: hidden;
+    padding-right: 500px;
+    pointer-events: none;
 }
-.comp-list::before {
+
+.comp-list::after {
     content: "";
-    display: block;
     position: absolute;
-    top: 140px;
+    border-right: solid 2px var(--locked);
-    height: 2px;
+    background: var(--raised-background);
-    left: 10px;
+    top: 0;
-    right: 10px;
+    bottom: 0;
-    background-color: var(--foreground);
+    left: 0;
+    right: 0;
+    z-index: -1;
 }
-.comp-list > div {
+
+.comp-list > .comp {
     position: relative;
     width: 50px;
     height: 50px;
     margin: 10px;
+    pointer-events: all;
+}
+
+.comp-list > div:nth-child(3)::after,
+.comp-list > div:nth-child(4)::after {
+    content: "";
+    position: absolute;
+    top: calc(100% + 10px);
+    height: 2px;
+    background-color: var(--foreground);
+    left: 0;
+    right: 0;
+}
+.comp-list > div:nth-child(3)::after {
+    right: -50px;
+}
+.comp-list > div:nth-child(4)::after {
+    left: -50px;
 }
 .comp-list > img.selected:not(.producedItem) {
     transform: translate(-5px, -5px);