feat: minor improvements

src/components/Container.tsx

@@ -174,7 +174,7 @@ const Container: React.FC<{
 						width: 100vw;
 						left: 0;
 						bottom: 0;
-						height: 10rem;
+						height: 8rem;
 						background: rgb(0, 0, 0);
 						background: linear-gradient(
 							180deg,

src/components/Exp/Story.tsx

@@ -86,6 +86,9 @@ const story = css`
 			left: 0;
 
 			&::before {
+				/* TODO: keep until we implement drag */
+				display: none;
+
 				content: "";
 				position: absolute;
 				width: 2rem;
@@ -99,25 +102,27 @@ const story = css`
 		}
 
 		& .story-content {
+			--padding: 12vw;
 			display: flex;
 			flex-direction: column;
-			gap: 3rem;
+			gap: 2rem;
 			/* height: 100%; */
 			max-width: 40rem;
 
-			margin-block: 4rem;
+			margin-block: calc(var(--padding) + 1rem);
 			overflow-x: hidden;
 			overflow-y: auto;
 			overscroll-behavior: contain;
 
 			& > img {
-				margin-inline: 4rem;
+				margin-inline: var(--padding);
+				/* align-self: center; */
 			}
 
 			& > div {
 				column-count: unset;
-				padding-inline: 4rem;
-				padding-block-end: 3rem;
+				padding-inline: var(--padding);
+				padding-block-end: 4rem;
 				height: 100%;
 				overflow-y: auto;
 
@@ -162,18 +167,24 @@ export const Story = ({ description, logo, active }: Experience) => {
 							border: none;
 							background: var(--card-active);
 							color: var(--text-subdued);
-							width: 3rem;
-							height: 3rem;
+							width: 1.8rem;
+							height: 1.8rem;
+							padding: 0.2rem;
 							border-radius: 3rem;
 
+							& svg {
+								width: 0.8rem;
+								height: 0.8rem;
+							}
+
 							/* set in mobile mode */
 							/* display: flex; */
 							justify-content: center;
 							align-items: center;
 
 							position: absolute;
-							top: 4rem;
-							right: 4rem;
+							top: calc(1rem + var(--padding));
+							right: var(--padding);
 							cursor: pointer;
 
 							transform: rotate(90deg);

src/pages/main/Exp.tsx

@@ -84,21 +84,11 @@ const Exp: React.FC = () => {
 							key={i}
 							active={slug === unit.slug}
 							{...unit}
-							onClick={e => {
+							onClick={() => {
 								if (slug === unit.slug) return navigate("/experience");
 								if (slug)
 									navigate(`/experience/${unit.slug}`, { replace: true });
 								else navigate(`/experience/${unit.slug}`);
-
-								// setTimeout(() => {
-								// 	console.log("dping");
-								// 	(
-								// 		(e.target as HTMLElement).nextSibling as HTMLElement
-								// 	)?.scrollIntoView?.({
-								// 		behavior: "smooth",
-								// 		block: "center",
-								// 	});
-								// }, 300);
 							}}
 						/>
 					))}