style: 💄 Prevent overflow-x on layout, disable animate list on mobile

edwinhern · Jan 24, 2025 · 440be5d · 440be5d
1 parent 4564731
commit 440be5d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -155,7 +155,9 @@
 		animation: var(--animate-in-reverse);
 		animation-delay: calc(var(--index) * -130ms);
 	}
+}
 
+@media (hover: hover) {
 	.animated-list:hover li {
 		opacity: 0.6;
 		transition: opacity 0.2s;
@@ -164,4 +166,4 @@
 	.animated-list:hover li:hover {
 		opacity: 1;
 	}
-}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -49,7 +49,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: Readonly<PropsWithChildren>) {
 	return (
 		<html lang="en" suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable}`}>
-			<body className="min-h-svh antialiased">
+			<body className="min-h-svh w-full overflow-x-hidden scroll-smooth antialiased">
 				<Providers>
 					<AppNavbar className="mx-auto px-4 py-4 md:max-w-[700px] md:px-0 md:py-8">
 						<div className="pt-8">{children}</div>