From a7b708363717c158a94b132bc487097a365afe29 Mon Sep 17 00:00:00 2001
From: DaPandamonium <dapanda.pew@gmail.com>
Date: Sat, 26 Jul 2025 01:12:48 +0300
Subject: [PATCH 1/6] style(RecipePanel): adjust layout, spacing, and sizing
 for better visual balance

---
 frontend/src/components/bitcraft/items.tsx    | 38 ++++++++-------
 .../details/buildingdesc-details.tsx          | 29 ++++++------
 .../components/details/itemdesc-details.tsx   | 46 +++++++++++--------
 .../details/resourcedesc-details.tsx          | 41 ++++++++++-------
 4 files changed, 88 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/bitcraft/items.tsx b/frontend/src/components/bitcraft/items.tsx
index 6ffc561..9e11089 100644
--- a/frontend/src/components/bitcraft/items.tsx
+++ b/frontend/src/components/bitcraft/items.tsx
@@ -234,26 +234,30 @@ export const ItemListComponent: Component<ItemListComponentProps> = (props) => {
 
     return (
         <HoverCard>
-            <HoverCardTrigger class="rounded border-accent-foreground border-l-1 border-r-1 mx-1">
+            <HoverCardTrigger class="rounded-lg border border-border px-3 py-2 mx-1 flex flex-col items-center gap-1 bg-muted/10 shadow-sm">
                 <Show when={props.probability}>
-                    <div class="text-center">
-                        <ProbabilityIndicator probability={props.probability!} chances={props.chances}/>
+                    <div class="text-sm font-semibold text-foreground text-center">
+                        <ProbabilityIndicator probability={props.probability!} chances={props.chances} />
                     </div>
                 </Show>
-                <ItemStackArrayComponent stackProps={averages}/>
+                <ItemStackArrayComponent stackProps={averages} />
                 <Show when={props.showTip}>
-                    <div class="text-center text-muted-foreground underline decoration-1 decoration-dashed"
-                         onclick={() =>
-                             typeof props.probability === 'number' && props.chances && fullNode.toggle()
-                         }
+                    <button
+                        type="button"
+                        title="Toggle between average per output and full yield"
+                        class="text-xs text-muted-foreground underline underline-offset-2 decoration-muted-foreground/50 hover:decoration-muted-foreground/90 transition-colors text-center"
+                        onclick={() =>
+                            typeof props.probability === 'number' && props.chances && fullNode.toggle()
+                        }
                     >
                         {`(avg. / ${fullNode.useFullNode() ? "full yield" : "output"})`}
-                    </div>
+                    </button>
                 </Show>
             </HoverCardTrigger>
             <HoverCardContent class="w-auto min-w-64">
-                <div class="grid grid-flow-row grid-cols-2 justify-items-center overflow-y-auto max-h-[50vh]">
-                    <p class="text-center mb-2 col-span-2">Weighted List</p>
+                <div class="grid grid-flow-row grid-cols-2 justify-items-center max-h-[50vh] overflow-y-auto">
+                    <p class="text-center mb-2 col-span-2 text-sm text-muted-foreground">Weighted List</p>
+
                     <Show when={props.original}>
                         <div class="col-span-2 justify-self-center">
                             <ItemStackIcon
@@ -262,14 +266,16 @@ export const ItemListComponent: Component<ItemListComponentProps> = (props) => {
                             />
                         </div>
                     </Show>
-                    <div>Weight</div>
-                    <div>Items</div>
+
+                    <div class="text-xs font-semibold text-muted-foreground">Weight</div>
+                    <div class="text-xs font-semibold text-muted-foreground">Items</div>
+
                     <For each={possibilities}>
                         {(poss) => (
                             <>
-                                <Separator class="my-2 col-span-2 border-muted-foreground"/>
-                                <div class="place-self-center">{fixFloat(poss.probability, 3)}</div>
-                                <ItemStackArrayComponent stacks={() => poss.items}/>
+                                <Separator class="my-2 col-span-2 border-muted" />
+                                <div class="place-self-center text-sm">{fixFloat(poss.probability, 3)}</div>
+                                <ItemStackArrayComponent stacks={() => poss.items} />
                             </>
                         )}
                     </For>
diff --git a/frontend/src/components/details/buildingdesc-details.tsx b/frontend/src/components/details/buildingdesc-details.tsx
index fd80ad3..f6598c0 100644
--- a/frontend/src/components/details/buildingdesc-details.tsx
+++ b/frontend/src/components/details/buildingdesc-details.tsx
@@ -40,28 +40,29 @@ type RecipePanelProps<T> = {
 
 function RecipePanel<T>(props: RecipePanelProps<T>) {
     return (
-        <TabsContent class="mt-8" value={props.tabValue}>
-            <div class="flex flex-col min-w-1/2 justify-center">
-                <div class="grid grid-flow-col grid-rows-1 justify-center">
+        <TabsContent value={props.tabValue} class="animate-none">
+            <div class="flex flex-col items-center w-full  mx-auto gap-4 px-2 md:px-4">
+                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2">
                     {props.getInputs(props.recipe)}
                 </div>
-                <div class="flex flex-row justify-center">
-                    <IconDown class="w-8 h-8 my-2"/>
-                </div>
-                <div class="grid grid-flow-col grid-rows-1 justify-center">
-                    {props.getOutputs!(props.recipe)}
+                <IconDown class="w-6 h-6 text-muted-foreground" />
+                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2">
+                    {props.getOutputs(props.recipe)}
                 </div>
-                <div class="flex flex-col items-center mt-4">
+                <div class="grid w-full max-w-md gap-1">
                     <For each={props.getStatlines(props.recipe)}>
-                        {pair => <div class="flex flex-row w-full max-w-100">
-                            <div class="text-nowrap mr-2">{pair[0]}</div>
-                            <div class="dots-before flex flex-1 text-nowrap">{pair[1]}</div>
-                        </div>}
+                        {([label, value]) => (
+                            <div class="flex justify-between items-center border-b border-muted py-0.5 px-1 text-sm">
+                                <div class="text-muted-foreground">{label}</div>
+                                <div class="font-medium text-right">{value}</div>
+                            </div>
+                        )}
                     </For>
                 </div>
+
             </div>
         </TabsContent>
-    )
+    );
 }
 
 type RecipesPanelProps = {
diff --git a/frontend/src/components/details/itemdesc-details.tsx b/frontend/src/components/details/itemdesc-details.tsx
index 53b9aef..2ff936a 100644
--- a/frontend/src/components/details/itemdesc-details.tsx
+++ b/frontend/src/components/details/itemdesc-details.tsx
@@ -157,36 +157,44 @@ type RecipePanelProps<T> = {
 
 function RecipePanel<T>(props: RecipePanelProps<T>) {
     return (
-        <TabsContent class="mt-8" value={props.tabValue}>
-            <div class="flex flex-col min-w-1/2 justify-center">
-                <div class="grid grid-flow-col grid-rows-1 justify-center">
+        <TabsContent value={props.tabValue} class="animate-none">
+            <div class="flex flex-col items-center w-full mx-auto gap-3 px-2 md:px-4 max-w-[1100px]">
+                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2">
                     {props.getInputs(props.recipe)}
                 </div>
-                <div class="flex flex-row justify-center">
-                    <IconDown class="w-8 h-8 my-2"/>
-                </div>
-                <div class="grid grid-flow-col grid-rows-1 justify-center">
-                    <Show when={props.getOutputs}
-                          fallback={
-                              <For each={props.getOutputStacks!(props.recipe)} fallback={"No Outputs"}>
-                                  {stack => expandStack(stack, props.maskedProbabilities, props.chances)}
-                              </For>
-                          }
+                <IconDown class="w-6 h-6 text-muted-foreground" />
+                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2">
+                    <Show
+                        when={props.getOutputs}
+                        fallback={
+                            <For
+                                each={props.getOutputStacks?.(props.recipe)}
+                                fallback={<div class="col-span-full text-center text-muted-foreground">No Outputs</div>}
+                            >
+                                {(stack) => (
+                                    <div class="rounded-xl border border-border bg-muted/30 px-3 py-4 min-w-[80px] min-h-[80px] flex flex-col items-center justify-center text-center shadow-sm">
+                                        {expandStack(stack, props.maskedProbabilities, props.chances)}
+                                    </div>
+                                )}
+                            </For>
+                        }
                     >
                         {props.getOutputs!(props.recipe)}
                     </Show>
                 </div>
-                <div class="flex flex-col items-center mt-4">
+                <div class="grid w-full max-w-md gap-1">
                     <For each={props.getStatlines(props.recipe)}>
-                        {pair => <div class="flex flex-row w-full max-w-100">
-                            <div class="text-nowrap mr-2">{pair[0]}</div>
-                            <div class="dots-before flex flex-1 text-nowrap">{pair[1]}</div>
-                        </div>}
+                        {([label, value]) => (
+                            <div class="flex justify-between items-center border-b border-muted py-0.5 px-1 text-sm">
+                                <div class="text-muted-foreground">{label}</div>
+                                <div class="font-medium text-right">{value}</div>
+                            </div>
+                        )}
                     </For>
                 </div>
             </div>
         </TabsContent>
-    )
+    );
 }
 
 type RecipesPanelProps = {
diff --git a/frontend/src/components/details/resourcedesc-details.tsx b/frontend/src/components/details/resourcedesc-details.tsx
index 1961a76..c99a137 100644
--- a/frontend/src/components/details/resourcedesc-details.tsx
+++ b/frontend/src/components/details/resourcedesc-details.tsx
@@ -37,32 +37,39 @@ type RecipePanelProps<T> = {
 
 function RecipePanel<T>(props: RecipePanelProps<T>) {
     return (
-        <TabsContent class="mt-8" value={props.tabValue}>
-            <div class="flex flex-col min-w-1/2 justify-center">
-                <div class="grid grid-flow-col grid-rows-1 justify-center">
+        <TabsContent value={props.tabValue} class="animate-none">
+            <div class="flex flex-col items-center w-full  mx-auto gap-3 px-2 md:px-4">
+                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2">
                     {props.getInputs(props.recipe)}
                 </div>
-                <div class="flex flex-row justify-center">
-                    <IconDown class="w-8 h-8 my-2"/>
-                </div>
-                <div class="grid grid-flow-col grid-rows-1 justify-center">
-                    <For each={props.getOutputStacks!(props.recipe)} fallback={"No Outputs"}>
-                        {stack => expandStack(stack, props.maskedProbabilities, props.chances)}
+                <IconDown class="w-6 h-6 text-muted-foreground" />
+                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2">
+                    <For each={props.getOutputStacks?.(props.recipe)} fallback={
+                        <div class="col-span-full text-center text-muted-foreground">No Outputs</div>
+                    }>
+                        {(stack) => (
+                            <div class="rounded-xl border border-border bg-muted/30 px-3 py-4 min-w-[80px] min-h-[80px] flex flex-col items-center justify-center text-center shadow-sm">
+                                {expandStack(stack, props.maskedProbabilities, props.chances)}
+                            </div>
+                        )}
                     </For>
                 </div>
-                <div class="flex flex-col items-center mt-4">
+                <div class="grid w-full max-w-md gap-2">
                     <For each={props.getStatlines(props.recipe)}>
-                        {pair => <div class="flex flex-row w-full max-w-100">
-                            <div class="text-nowrap mr-2">{pair[0]}</div>
-                            <div class="dots-before flex flex-1 text-nowrap">{pair[1]}</div>
-                        </div>}
+                        {([label, value]) => (
+                            <div class="flex justify-between items-center border-b border-muted py-1 px-1">
+                                <div class="text-sm text-muted-foreground font-medium">{label}</div>
+                                <div class="text-sm font-semibold text-right">{value}</div>
+                            </div>
+                        )}
                     </For>
                 </div>
             </div>
         </TabsContent>
-    )
+    );
 }
 
+
 type RecipesPanelProps = {
     value: Accessor<Option>,
     setValue: Setter<Option>,
@@ -208,8 +215,8 @@ const RecipesCard: Component<ResourceCardProps> = (props) => {
     return (
         <Show when={usageOptions.length || acquireOptions.length}>
             <Card>
-                <CardContent class="mt-6">
-                    <Tabs class="w-full">
+                <CardContent class="mt-6 px-10">
+                    <Tabs class="w-full h-fit">
                         <TabsList class="grid grid-cols-2">
                             <TabsTrigger value="obtain" disabled={acquireOptions.length == 0}>Obtain</TabsTrigger>
                             <TabsTrigger value="use" disabled={usageOptions.length == 0}>Use</TabsTrigger>

From a16ab2670824d612a1444d48eaf8d1f531b552c8 Mon Sep 17 00:00:00 2001
From: DaPandamonium <dapanda.pew@gmail.com>
Date: Mon, 28 Jul 2025 15:16:11 +0300
Subject: [PATCH 2/6] style(RecipePanel): enhance output stack container width
 for better responsiveness

---
 frontend/src/components/details/itemdesc-details.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/details/itemdesc-details.tsx b/frontend/src/components/details/itemdesc-details.tsx
index 2ff936a..b75c326 100644
--- a/frontend/src/components/details/itemdesc-details.tsx
+++ b/frontend/src/components/details/itemdesc-details.tsx
@@ -172,7 +172,7 @@ function RecipePanel<T>(props: RecipePanelProps<T>) {
                                 fallback={<div class="col-span-full text-center text-muted-foreground">No Outputs</div>}
                             >
                                 {(stack) => (
-                                    <div class="rounded-xl border border-border bg-muted/30 px-3 py-4 min-w-[80px] min-h-[80px] flex flex-col items-center justify-center text-center shadow-sm">
+                                    <div class="rounded-xl border border-border bg-muted/30 px-3 py-4 min-w-[80px] max-w-[200px] w-full overflow-x-auto flex-shrink-0 flex flex-col items-center justify-center text-center shadow-sm">
                                         {expandStack(stack, props.maskedProbabilities, props.chances)}
                                     </div>
                                 )}

From 75b8a6141fbda7e80d8fa6db6cedd7738591b1f2 Mon Sep 17 00:00:00 2001
From: wizjany <wizjany@gmail.com>
Date: Mon, 28 Jul 2025 17:29:30 -0400
Subject: [PATCH 3/6] Remove nested border for item lists.

---
 frontend/src/components/bitcraft/items.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/bitcraft/items.tsx b/frontend/src/components/bitcraft/items.tsx
index 9e11089..be5ae94 100644
--- a/frontend/src/components/bitcraft/items.tsx
+++ b/frontend/src/components/bitcraft/items.tsx
@@ -234,7 +234,7 @@ export const ItemListComponent: Component<ItemListComponentProps> = (props) => {
 
     return (
         <HoverCard>
-            <HoverCardTrigger class="rounded-lg border border-border px-3 py-2 mx-1 flex flex-col items-center gap-1 bg-muted/10 shadow-sm">
+            <HoverCardTrigger class="px-3 py-2 mx-1 flex flex-col items-center gap-1">
                 <Show when={props.probability}>
                     <div class="text-sm font-semibold text-foreground text-center">
                         <ProbabilityIndicator probability={props.probability!} chances={props.chances} />

From 8033ce55a887aa0167244d6f73fe40139c5bece0 Mon Sep 17 00:00:00 2001
From: DaPandamonium <dapanda.pew@gmail.com>
Date: Tue, 29 Jul 2025 17:16:28 +0300
Subject: [PATCH 4/6] style(RecipePanel): improve scrollable layout

---
 .../components/details/itemdesc-details.tsx   | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/details/itemdesc-details.tsx b/frontend/src/components/details/itemdesc-details.tsx
index b75c326..c2115b8 100644
--- a/frontend/src/components/details/itemdesc-details.tsx
+++ b/frontend/src/components/details/itemdesc-details.tsx
@@ -167,16 +167,18 @@ function RecipePanel<T>(props: RecipePanelProps<T>) {
                     <Show
                         when={props.getOutputs}
                         fallback={
-                            <For
-                                each={props.getOutputStacks?.(props.recipe)}
-                                fallback={<div class="col-span-full text-center text-muted-foreground">No Outputs</div>}
-                            >
-                                {(stack) => (
-                                    <div class="rounded-xl border border-border bg-muted/30 px-3 py-4 min-w-[80px] max-w-[200px] w-full overflow-x-auto flex-shrink-0 flex flex-col items-center justify-center text-center shadow-sm">
-                                        {expandStack(stack, props.maskedProbabilities, props.chances)}
-                                    </div>
-                                )}
-                            </For>
+                            <div class="flex overflow-x-auto gap-2 px-2  min-w-[80px] max-w-[200px]">
+                                <For
+                                    each={props.getOutputStacks?.(props.recipe)}
+                                    fallback={<div class="col-span-full text-center text-muted-foreground">No Outputs</div>}
+                                >
+                                    {(stack) => (
+                                        <div class="flex-shrink-0 rounded-xl border bg-muted/30 px-3 py-4 flex flex-col items-center text-center text-xs gap-1">
+                                            {expandStack(stack, props.maskedProbabilities, props.chances)}
+                                        </div>
+                                    )}
+                                </For>
+                            </div>
                         }
                     >
                         {props.getOutputs!(props.recipe)}

From 7deb56d889904aa0336cdb10b0231c723317a880 Mon Sep 17 00:00:00 2001
From: DaPandamonium <dapanda.pew@gmail.com>
Date: Tue, 29 Jul 2025 19:31:20 +0300
Subject: [PATCH 5/6] style(RecipePanel): moved scrollbar inside the box and
 fix overflow issues

---
 .../components/details/itemdesc-details.tsx   | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/details/itemdesc-details.tsx b/frontend/src/components/details/itemdesc-details.tsx
index c2115b8..bdcba94 100644
--- a/frontend/src/components/details/itemdesc-details.tsx
+++ b/frontend/src/components/details/itemdesc-details.tsx
@@ -159,7 +159,7 @@ function RecipePanel<T>(props: RecipePanelProps<T>) {
     return (
         <TabsContent value={props.tabValue} class="animate-none">
             <div class="flex flex-col items-center w-full mx-auto gap-3 px-2 md:px-4 max-w-[1100px]">
-                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2">
+                <div class="grid grid-flow-col auto-cols-auto justify-center gap-2 mt-4">
                     {props.getInputs(props.recipe)}
                 </div>
                 <IconDown class="w-6 h-6 text-muted-foreground" />
@@ -167,18 +167,26 @@ function RecipePanel<T>(props: RecipePanelProps<T>) {
                     <Show
                         when={props.getOutputs}
                         fallback={
-                            <div class="flex overflow-x-auto gap-2 px-2  min-w-[80px] max-w-[200px]">
-                                <For
-                                    each={props.getOutputStacks?.(props.recipe)}
-                                    fallback={<div class="col-span-full text-center text-muted-foreground">No Outputs</div>}
+                            <div class="w-full rounded-xl border border-border bg-muted/30 px-2 py-3 overflow-hidden">
+                                <div
+                                    class="flex gap-2 overflow-x-auto"
+                                    style="scrollbar-width: thin; scrollbar-gutter: stable"
                                 >
-                                    {(stack) => (
-                                        <div class="flex-shrink-0 rounded-xl border bg-muted/30 px-3 py-4 flex flex-col items-center text-center text-xs gap-1">
-                                            {expandStack(stack, props.maskedProbabilities, props.chances)}
-                                        </div>
-                                    )}
-                                </For>
+                                    <For
+                                        each={props.getOutputStacks?.(props.recipe)}
+                                        fallback={<div class="col-span-full text-center text-muted-foreground">No Outputs</div>}
+                                    >
+                                        {(stack) => (
+                                            <div
+                                                class="flex-shrink-0 min-w-[80px] max-w-[200px] rounded-xl border bg-muted/30 px-3 py-4 flex flex-1/2 items-center text-center text-xs gap-1"
+                                            >
+                                                {expandStack(stack, props.maskedProbabilities, props.chances)}
+                                            </div>
+                                        )}
+                                    </For>
+                                </div>
                             </div>
+
                         }
                     >
                         {props.getOutputs!(props.recipe)}

From 10d4154f4c7e499c5c48acdc2e25747b9b000c94 Mon Sep 17 00:00:00 2001
From: DaPandamonium <dapanda.pew@gmail.com>
Date: Sat, 2 Aug 2025 22:11:12 +0300
Subject: [PATCH 6/6] fix(RecipePanel): add overflow handling and improve
 layout responsiveness

---
 .../components/details/itemdesc-details.tsx   | 75 ++++++++++++-------
 1 file changed, 47 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/details/itemdesc-details.tsx b/frontend/src/components/details/itemdesc-details.tsx
index bdcba94..a7f7c7b 100644
--- a/frontend/src/components/details/itemdesc-details.tsx
+++ b/frontend/src/components/details/itemdesc-details.tsx
@@ -20,7 +20,7 @@ import {
     TravelerTaskDesc,
     TravelerTradeOrderDesc
 } from "~/bindings/ts";
-import {Accessor, Component, createSignal, For, JSX, Setter, Show} from "solid-js";
+import {Accessor, Component, createSignal, For, JSX, onCleanup, onMount, Setter, Show} from "solid-js";
 import {BitCraftTables} from "~/lib/spacetime";
 import {TbArrowBigDownLines as IconDown} from "solid-icons/tb";
 import {Card, CardContent, CardHeader, CardTitle} from "~/components/ui/card";
@@ -156,6 +156,20 @@ type RecipePanelProps<T> = {
 }
 
 function RecipePanel<T>(props: RecipePanelProps<T>) {
+    const [isOverflowing, setIsOverflowing] = createSignal(false);
+    let scrollRef: HTMLDivElement | undefined;
+
+    onMount(() => {
+        const checkOverflow = () => {
+            if (!scrollRef) return;
+            setIsOverflowing(scrollRef.scrollWidth > scrollRef.clientWidth);
+        };
+
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        onCleanup(() => window.removeEventListener('resize', checkOverflow));
+    });
+
     return (
         <TabsContent value={props.tabValue} class="animate-none">
             <div class="flex flex-col items-center w-full mx-auto gap-3 px-2 md:px-4 max-w-[1100px]">
@@ -169,16 +183,21 @@ function RecipePanel<T>(props: RecipePanelProps<T>) {
                         fallback={
                             <div class="w-full rounded-xl border border-border bg-muted/30 px-2 py-3 overflow-hidden">
                                 <div
-                                    class="flex gap-2 overflow-x-auto"
-                                    style="scrollbar-width: thin; scrollbar-gutter: stable"
+                                    ref={scrollRef}
+                                    class={`flex overflow-x-auto items-stretch ${isOverflowing() ? 'gap-2' : 'justify-center gap-0 min-w-full'}`}
+                                    style={`scrollbar-width: thin;${isOverflowing() ? ' scrollbar-gutter: stable;' : ''}`}
                                 >
+
+
+
+
                                     <For
                                         each={props.getOutputStacks?.(props.recipe)}
                                         fallback={<div class="col-span-full text-center text-muted-foreground">No Outputs</div>}
                                     >
                                         {(stack) => (
                                             <div
-                                                class="flex-shrink-0 min-w-[80px] max-w-[200px] rounded-xl border bg-muted/30 px-3 py-4 flex flex-1/2 items-center text-center text-xs gap-1"
+                                                class="flex-shrink-0 min-w-[80px] max-w-[200px] rounded-xl border bg-muted/30 px-3 py-4 flex items-center text-center text-xs gap-1"
                                             >
                                                 {expandStack(stack, props.maskedProbabilities, props.chances)}
                                             </div>
@@ -237,7 +256,7 @@ function toolReqPair(req: ToolRequirement, toolData: Map<any, ToolTypeDesc>) {
     return [
         "Tool:",
         <>
-            Tier <TierIcon tier={req.level} class="mx-1 self-center"/>
+            Tier <TierIcon tier={req.level} class="mx-1 self-center" />
             {tool.name}
             <Show when={req.power > 1}>
                 {"(Power >= "}{req.power}{")"}
@@ -326,7 +345,7 @@ const RecipesPanel: Component<RecipesPanelProps> = (props) => {
                                     "Building:",
                                     <>
                                         Tier <TierIcon tier={(r as CraftingRecipeDesc).buildingRequirement!.tier}
-                                                       class="mx-1 self-center"/>
+                                            class="mx-1 self-center" />
                                         {buildingData.get((r as CraftingRecipeDesc).buildingRequirement!.buildingType)?.name}
                                     </>
                                 ]] : [])
@@ -458,8 +477,8 @@ function addTradeToMap(
         "travelerTrade_" + trade.id,
         [
             trade.traveler.tag + " Trade",
-            <ItemStackArrayComponent stacks={() => inputs}/>,
-            () => <ItemStackArrayComponent stacks={() => outputs} showName={true}/>,
+            <ItemStackArrayComponent stacks={() => inputs} />,
+            () => <ItemStackArrayComponent stacks={() => outputs} showName={true} />,
             stats
         ]
     );
@@ -505,7 +524,7 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
             "travelerTask_" + task.id,
             [
                 (skill ? skill + " " : "") + "Traveler Task",
-                <ItemStackArrayComponent stacks={() => inputs}/>,
+                <ItemStackArrayComponent stacks={() => inputs} />,
                 outputs, stats
             ]
         )
@@ -516,7 +535,7 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
             "conversion_" + conv.id,
             [
                 conv.name,
-                <ItemStackArrayComponent stacks={() => conv.inputItems}/>,
+                <ItemStackArrayComponent stacks={() => conv.inputItems} />,
                 (conv.outputItem ? [conv.outputItem] : []) as ItemStack[],
                 [
                     ["Time:", fixFloat(conv.timeCost)],
@@ -532,10 +551,10 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
         const inputs = <ItemStackArrayComponent
             stackProps={() => [
                 ...cons.consumedItemStacks.map((s: InputItemStack) => {
-                    return {item: [s.itemType.tag, s.itemId], quantity: s.quantity} as ItemStackIconProps
+                    return { item: [s.itemType.tag, s.itemId], quantity: s.quantity } as ItemStackIconProps
                 }),
                 ...cons.consumedCargoStacks.map((s: InputItemStack) => {
-                    return {item: [s.itemType.tag, s.itemId], quantity: s.quantity} as ItemStackIconProps
+                    return { item: [s.itemType.tag, s.itemId], quantity: s.quantity } as ItemStackIconProps
                 })
             ]}
         />;
@@ -552,7 +571,7 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
             [
                 "Construct " + cons.name,
                 inputs,
-                () => <BuildingIcon building={cons.buildingDescriptionId}/>,
+                () => <BuildingIcon building={cons.buildingDescriptionId} />,
                 stats
             ]
         )
@@ -562,10 +581,10 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
         const outputs = <ItemStackArrayComponent
             stackProps={() => [
                 ...cons.outputItemStacks.map((s: ItemStack) => {
-                    return {item: [s.itemType.tag, s.itemId], quantity: s.quantity} as ItemStackIconProps
+                    return { item: [s.itemType.tag, s.itemId], quantity: s.quantity } as ItemStackIconProps
                 }),
                 ...(cons.outputCargoId
-                    ? [{item: [ItemType.Cargo.tag, cons.outputCargoId], quantity: 1} as ItemStackIconProps]
+                    ? [{ item: [ItemType.Cargo.tag, cons.outputCargoId], quantity: 1 } as ItemStackIconProps]
                     : [])
             ]}
         />;
@@ -580,7 +599,7 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
             "deconstruction_" + cons.id,
             [
                 "Deconstruct " + (building?.name ?? "unknown building"),
-                <BuildingIcon building={cons.consumedBuilding}/>,
+                <BuildingIcon building={cons.consumedBuilding} />,
                 () => outputs,
                 stats
             ]
@@ -609,13 +628,13 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
         }
         additionalAcquisitions.set(
             "itemList_" + res.id,
-            [name + " (item list)", <ItemIcon item={itemWithList}/>, [res], []]
+            [name + " (item list)", <ItemIcon item={itemWithList} />, [res], []]
         );
     });
     const resourceDepletion = BitCraftTables.ResourceDesc.findByItemStacks(item.id, props.itemType);
     resourceDepletion()![1].forEach(res => {
         const name = "Deplete " + res.name;
-        const input = <ResourceIcon res={res}/>;
+        const input = <ResourceIcon res={res} />;
         const outputs = collapseStacks(res.onDestroyYield);
         additionalAcquisitions.set("resourceDeplete_" + res.id, [name, input, outputs, []]);
     });
@@ -627,23 +646,23 @@ const RecipesCard: Component<ItemCardProps> = (props) => {
     deconstructionData()![1].forEach(deconstruction => addDeconstructionToMap(deconstruction, additionalAcquisitions));
 
     const usageOptions = recipeMaps.useRecipe.values().map(([n, v]) => {
-        return {label: n, value: "craft_" + v.id}
+        return { label: n, value: "craft_" + v.id }
     }).toArray();
     usageOptions.push(...recipeMaps.useExtraction.values().map(([n, v]) => {
-        return {label: n, value: "extraction_" + v.id}
+        return { label: n, value: "extraction_" + v.id }
     }).toArray())
     usageOptions.push(...additionalUses.entries().map((([n, v]) => {
-        return {label: v[0], value: n}
+        return { label: v[0], value: n }
     })));
 
     const acquireOptions = recipeMaps.acquireRecipe.values().map(([n, v]) => {
-        return {label: n, value: "craft_" + v.id}
+        return { label: n, value: "craft_" + v.id }
     }).toArray();
     acquireOptions.push(...recipeMaps.acquireExtraction.values().map(([n, v]) => {
-        return {label: n, value: "extraction_" + v.id}
+        return { label: n, value: "extraction_" + v.id }
     }).toArray())
     acquireOptions.push(...additionalAcquisitions.entries().map(([n, v]) => {
-        return {label: v[0], value: n}
+        return { label: v[0], value: n }
     }));
 
     const [usageValue, setUsageValue] = createSignal<Option>((usageOptions.length ? usageOptions[0] : ["No uses", ""]) as Option);
@@ -689,10 +708,10 @@ export function renderItemDescDialog(item: ItemDesc | CargoDesc, itemType: strin
     return (
         <>
             <div class="flex flex-row">
-                <ItemIcon item={item} noInteract={true}/>
+                <ItemIcon item={item} noInteract={true} />
                 <div class="flex flex-col flex-1 justify-left ml-2">
                     {item.name}
-                    <div>(Tier <TierIcon class="inline ml-1" tier={item.tier}/>, {item.rarity.tag})</div>
+                    <div>(Tier <TierIcon class="inline ml-1" tier={item.tier} />, {item.rarity.tag})</div>
                 </div>
             </div>
             <Show when={item.description}>
@@ -701,9 +720,9 @@ export function renderItemDescDialog(item: ItemDesc | CargoDesc, itemType: strin
                 </div>
             </Show>
             <Show when={itemType == ItemType.Item.tag}>
-                <StatCard item={item} itemType={itemType}/>
+                <StatCard item={item} itemType={itemType} />
             </Show>
-            <RecipesCard item={item} itemType={itemType}/>
+            <RecipesCard item={item} itemType={itemType} />
         </>
     )
 }
\ No newline at end of file