fix(blog): aside animation stuttering

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/pages/blog/Home.tsx

@@ -100,17 +100,21 @@ const BlogHome: React.FC = () => {
 						}
 					}
 
-					& > aside {
+					& > aside,
-						transition: all 800ms;
+					& > aside .blog-list {
+						transition: all 300ms;
 					}
 
 					&:is(.aside-closed) {
-						aside {
+						& aside {
 							overflow: hidden;
-							transform: translateX(-1000%);
 							min-width: 0;
 							max-width: 0;
 						}
+
+						& aside .blog-list {
+							transform: translateX(-1000%);
+						}
 					}
 				`,
 			)}>
@@ -163,23 +167,25 @@ const BlogHome: React.FC = () => {
 					width: 100%;
 					flex: 2;
 					max-width: 45rem;
+					overflow-y: auto;
 				`}>
 				<div
-					className={css`
+					className={classNames(
-						height: 100%;
+						"blog-list",
-						width: 100%;
+						css`
-						overflow-y: auto;
+							width: 100%;
-						display: flex;
+							display: flex;
-						flex-direction: column;
+							flex-direction: column;
-						gap: 1rem;
+							gap: 1rem;
-						padding: 8vw;
+							padding: 8vw;
-						min-width: min(30rem, 100vw);
+							min-width: min(30rem, 100vw);
 
-						@media screen and (max-width: 50rem) {
+							@media screen and (max-width: 50rem) {
-							padding-block-start: 4rem;
+								padding-block-start: 4rem;
-							padding-block-end: 6rem;
+								padding-block-end: 6rem;
-						}
+							}
-					`}>
+						`,
+					)}>
 					<Header />
 					<Spacer y={2} />
 					{articles.map(article => {