From 4be814f0442d9d2e84e50b3908ef2ebeb7fe0e4a Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Thu, 19 Oct 2023 22:24:52 +0530
Subject: [PATCH] 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 | 3 +++
 src/pages/main/Exp.tsx         | 2 --
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Exp/Content.tsx b/src/components/Exp/Content.tsx
index 4e8c10e..d26451f 100644
--- a/src/components/Exp/Content.tsx
+++ b/src/components/Exp/Content.tsx
@@ -46,6 +46,9 @@ const btn = css`
 	text-align: left;
 	display: inherit;
 
+	/* offset padding */
+	transform: translateX(calc(var(--item-padding) * -1));
+
 	& > * {
 		z-index: 10;
 	}
diff --git a/src/pages/main/Exp.tsx b/src/pages/main/Exp.tsx
index cf3ac7c..2e65f83 100644
--- a/src/pages/main/Exp.tsx
+++ b/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);