fix: position-fixed being affected by transform

https://stackoverflow.com/questions/2637058/position-fixed-doesnt-work-when-using-webkit-transform
https://bugs.chromium.org/p/chromium/issues/detail?id=20574

src/components/Exp/Content.tsx

@@ -1,6 +1,6 @@
 import { css } from "@emotion/css";
 import React from "react";
-import { setupDynamicGradient } from "../../util";
+import { setupCursorTracking } from "../../util";
 import { Experience } from "./types";
 
 const Circle: React.FC = () => (
@@ -46,6 +46,9 @@ const btn = css`
 	text-align: left;
 	display: inherit;
 
+	/* offset padding */
+	transform: translateX(calc(var(--item-padding) * -1));
+
 	& > * {
 		z-index: 10;
 	}
@@ -87,7 +90,7 @@ export const Content = ({
 	location,
 }: Experience) => {
 	return (
-		<button className={btn} onClick={onClick} ref={setupDynamicGradient}>
+		<button className={btn} onClick={onClick} ref={setupCursorTracking}>
 			<div className="dynamic-gradient" />
 			<Circle />
 			<h4>

src/pages/main/Exp.tsx

@@ -38,8 +38,6 @@ const Exp: React.FC = () => {
 				className={css`
 					width: 100%;
 					--item-padding: 1.2rem;
-					/* offset padding */
-					transform: translateX(calc(var(--item-padding) * -1));
 
 					display: grid;
 					grid-template-columns: repeat(auto-fit, 20rem);

src/util/index.ts

@@ -58,7 +58,7 @@ export const get = {
 
 import "./dynamic-gradient.css";
 
-export function setupDynamicGradient(el: HTMLElement | null) {
+export function setupCursorTracking(el: HTMLElement | null) {
 	if (!el) return;
 
 	el.addEventListener("mousemove", e => {