From 7d8f51ad84cc71fa9320aa36d2e14a1f81eaed82 Mon Sep 17 00:00:00 2001
From: harryob <55142896+harryob@users.noreply.github.com>
Date: Fri, 10 Jan 2025 07:34:10 +0000
Subject: [PATCH] jank elimination

---
 tgui/packages/tgui/interfaces/HairPicker.tsx      |  1 -
 .../tgui/styles/interfaces/HairPicker.scss        | 15 ++++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/HairPicker.tsx b/tgui/packages/tgui/interfaces/HairPicker.tsx
index b8811fb40692..c2670a083f19 100644
--- a/tgui/packages/tgui/interfaces/HairPicker.tsx
+++ b/tgui/packages/tgui/interfaces/HairPicker.tsx
@@ -225,7 +225,6 @@ export const HairPickerElement = (props: {
             <Stack.Item
               key={hair.name}
               className={`Picker${active === hair.icon ? ' Active' : ''}`}
-              height="fit-content"
             >
               <Tooltip content={hair.name}>
                 <Box
diff --git a/tgui/packages/tgui/styles/interfaces/HairPicker.scss b/tgui/packages/tgui/styles/interfaces/HairPicker.scss
index 716741fbf859..1e3e8cf64acc 100644
--- a/tgui/packages/tgui/styles/interfaces/HairPicker.scss
+++ b/tgui/packages/tgui/styles/interfaces/HairPicker.scss
@@ -4,12 +4,17 @@
       margin-left: 6px;
     }
 
-    .Picker.Active {
-      outline: 4px solid #8ac8ff;
-    }
+    .Picker {
+      &.Active {
+        outline: 4px solid #8ac8ff;
+      }
+
+      & > div {
+        background: #fff;
+      }
 
-    .Picker img {
-      background: white;
+      height: 66px;
+      margin-bottom: 6px;
     }
   }
 }