fix(blog): aside reflows while collapsing

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

src/pages/blog/Home.tsx

@@ -91,27 +91,24 @@ const BlogHome: React.FC = () => {
 							aside {
 								min-width: 100vw;
 							}
-							main {
-								max-width: 0;
-							}
 						}
 						&:is(.article-open) {
 							aside {
 								min-width: 0;
 								max-width: 0;
 							}
-							main {
-								max-width: 0;
-							}
 						}
 					}
 
 					& > aside {
-						transition: all 250ms;
+						transition: all 350ms;
 					}
 
 					&:is(.aside-closed) {
 						aside {
+							overflow: hidden;
+							transform: translateX(-500%);
+							min-width: 0;
 							max-width: 0;
 						}
 					}
@@ -175,7 +172,7 @@ const BlogHome: React.FC = () => {
 						flex-direction: column;
 						gap: 1rem;
 						padding: 8vw;
-						min-width: 30rem;
+						min-width: min(30rem, 100vw);
 
 						@media screen and (max-width: 50rem) {
 							padding-block-start: 4rem;
@@ -189,8 +186,8 @@ const BlogHome: React.FC = () => {
 						const path = getBlogPath(article);
 
 						return (
-							<div key={path}>
 							<Link
+								key={path}
 								to={path}
 								className={css`
 									display: flex;
@@ -218,7 +215,6 @@ const BlogHome: React.FC = () => {
 								<Spacer />
 								<p>{snippet}</p>
 							</Link>
-							</div>
 						);
 					})}
 				</div>