fix: slider vertical align

cspell.json

@@ -1 +1 @@
-{"words":["attackable","Chupacabra","Ettin","Jiangshi","Kitsune","loadash","Rakshasa","Tarrasque","zustand","autochessia","starknet","Zeroable","syscall","struct","Serde","coor","dojoengine","anims","animationcomplete","Tweens","yoyo","despawn","Dogica","despawn","Tileset","tilesets","Tilemap","Tilemaps","audiosprite","holwer","Gameover","dogicapixelbold","dogicapixel","tailwindcss","ahooks","countup","Occu","vercel","amondnet","katana","sozo","dojoup"]}
+{"words":["attackable","Chupacabra","Ettin","Jiangshi","Kitsune","loadash","Rakshasa","Tarrasque","zustand","autochessia","starknet","Zeroable","syscall","struct","Serde","coor","dojoengine","anims","animationcomplete","Tweens","yoyo","despawn","Dogica","despawn","Tileset","tilesets","Tilemap","Tilemaps","audiosprite","holwer","Gameover","dogicapixelbold","dogicapixel","tailwindcss","ahooks","countup","Occu","vercel","amondnet","katana","sozo","dojoup","procs"]}

mprocs.yaml

@@ -8,4 +8,4 @@ procs:
   katana:
     shell: katana --disable-fee --invoke-max-steps 4500000
   torii:
-    shell: test -e "indexer.db" && rm indexer.db; torii --world "0x645cb3e9b4d7ae1afd34d64085e61519e431c39d4811f4e6bbc5f16b66fb0" --database indexer.db
+    shell: test -e "indexer.db" && rm indexer.db; pnpm wait-port 5050; torii --world "0x645cb3e9b4d7ae1afd34d64085e61519e431c39d4811f4e6bbc5f16b66fb0" --database indexer.db

packages/client/src/ui/features/misc/SpeedSlider.tsx

@@ -22,21 +22,29 @@ export const SpeedSlider = () => {
 
     return (
         <div className="fixed top-1 z-20 left-4 w-60">
-            <input
-                type="range"
-                min={0}
-                max={allowedValues.length - 1}
-                step={1}
-                value={index}
-                onChange={handleChange}
-                className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
-            />
-            <div className="flex justify-between text-xs mt-1">
-                {allowedValues.map((value, i) => (
-                    <span key={i} className={i === index ? "font-bold" : ""}>
-                        {value}
-                    </span>
-                ))}
+            <div className="relative pb-6">
+                <input
+                    type="range"
+                    min={0}
+                    max={allowedValues.length - 1}
+                    step={1}
+                    value={index}
+                    onChange={handleChange}
+                    className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+                />
+                <div className="absolute w-full flex justify-between text-xs mt-1">
+                    {allowedValues.map((value, i) => (
+                        <span
+                            key={i}
+                            className={`${i === index ? "font-bold" : ""} absolute -translate-x-1/2`}
+                            style={{
+                                left: `${(i / (allowedValues.length - 1)) * 100}%`,
+                            }}
+                        >
+                            {value}
+                        </span>
+                    ))}
+                </div>
             </div>
             <div className="text-center mt-1 text-[0.5rem]">
                 Animation Speed: {allowedValues[index]}