fix: slim skins and scrollbar

src/components/common/SkinViewer.tsx

@@ -16,6 +16,7 @@ interface SkinViewerProps {
   onNavigateRight: () => void;
   hideControls?: boolean;
   style?: React.CSSProperties;
+  slim?: boolean;
 }
 
 const SkinViewer = memo(function SkinViewer({
@@ -30,6 +31,7 @@ const SkinViewer = memo(function SkinViewer({
   onNavigateRight,
   hideControls,
   style,
+  slim,
 }: SkinViewerProps) {
   const mountRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -181,17 +183,19 @@ const SkinViewer = memo(function SkinViewer({
       });
 
       const isSlim =
-        !isLegacy &&
-        (() => {
-          const canvas = document.createElement("canvas");
-          canvas.width = img.width;
-          canvas.height = img.height;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) return false;
-          ctx.drawImage(img, 0, 0);
-          const data = ctx.getImageData(42, 48, 1, 1).data;
-          return data[3] === 0;
-        })();
+        slim !== undefined
+          ? slim
+          : !isLegacy &&
+            (() => {
+              const canvas = document.createElement("canvas");
+              canvas.width = img.width;
+              canvas.height = img.height;
+              const ctx = canvas.getContext("2d");
+              if (!ctx) return false;
+              ctx.drawImage(img, 0, 0);
+              const data = ctx.getImageData(42, 48, 1, 1).data;
+              return data[3] === 0;
+            })();
       const armW = isSlim ? 3 : 4;
       const headUv = {
         top: [8, 0, 8, 8],
@@ -461,7 +465,7 @@ const SkinViewer = memo(function SkinViewer({
       easterEggRef.current = null;
       requestRenderRef.current = null;
     };
-  }, [skinUrl, capeUrl]);
+  }, [skinUrl, capeUrl, slim]);
 
   useEffect(() => {
     const group = playerGroupRef.current;

src/components/views/SkinsView.tsx

@@ -120,7 +120,8 @@ const SkinsView = memo(function SkinsView() {
   const { setActiveView, setIsUiHidden } = useUI();
   const { playPressSound, playBackSound } = useAudio();
   const { isAndroid } = usePlatform();
-  const { skinUrl, setSkinUrl, setSkinIsSlim, capeUrl, setCapeUrl } = useSkin();
+  const { skinUrl, setSkinUrl, skinIsSlim, setSkinIsSlim, capeUrl, setCapeUrl } =
+    useSkin();
 
   const [focusIndex, setFocusIndex] = useState<number | null>(null);
   const [viewMode, setViewMode] = useState<"skin" | "cape">("skin");
@@ -759,6 +760,7 @@ const SkinsView = memo(function SkinsView() {
           onNavigateRight={() => {}}
           hideControls
           style={{ top: "45%" }}
+          slim={skinIsSlim}
         />
       </div>
 

src/css/index.css

@@ -178,7 +178,7 @@ body {
 }
 
 ::-webkit-scrollbar {
-    width: 14px;
+    width: 16px;
 }
 
 ::-webkit-scrollbar-track {
@@ -188,14 +188,18 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: url("/images/Slider_Handle.png") no-repeat center;
-    background-size: 100% 100%;
+    background-image: url("/images/Slider_Handle_top.png"),
+        url("/images/Slider_Handle_mid.png"),
+        url("/images/Slider_Handle_bottom.png");
+    background-repeat: no-repeat, no-repeat, no-repeat;
+    background-position: 50% 4px, 50% 8px, 50% 100%;
+    background-size: 16px 4px, 16px calc(100% - 14px), 16px 6px;
     image-rendering: pixelated;
     min-height: 44px;
 }
 
 .custom-scrollbar::-webkit-scrollbar {
-    width: 14px;
+    width: 16px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
@@ -205,8 +209,12 @@ body {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: url("/images/Slider_Handle.png") no-repeat center;
-    background-size: 100% 100%;
+    background-image: url("/images/Slider_Handle_top.png"),
+        url("/images/Slider_Handle_mid.png"),
+        url("/images/Slider_Handle_bottom.png");
+    background-repeat: no-repeat, no-repeat, no-repeat;
+    background-position: 50% 4px, 50% 8px, 50% 100%;
+    background-size: 16px 4px, 16px calc(100% - 14px), 16px 6px;
     image-rendering: pixelated;
     min-height: 44px;
 }

src/pages/App.tsx

@@ -659,6 +659,7 @@ export default function App() {
                     setIsUiHidden={setIsUiHidden}
                     isFocusedSection={focusSection === "skin"}
                     onNavigateRight={onNavigateToMenu}
+                    slim={skin.skinIsSlim}
                   />
                 )}
               </AnimatePresence>