fix: homepage mobile styling

Author: crutchcorn

src/app/page.tsx

@@ -83,7 +83,7 @@ const miniCards: CardAttributes[] = [
 
 export default function Page() {
   return (
-    <div data-test-id="page" className="mx-auto flex max-w-4xl flex-col py-8">
+    <div data-test-id="page" className="mx-auto flex max-w-4xl flex-col px-4 py-8">
       <Hero />
       <h2 className="py-8 text-2xl font-semibold">Topics</h2>
       <div className="grid place-items-center gap-4 pb-20 md:grid-cols-2 lg:grid-cols-3">

src/components/MiniCard.tsx

@@ -9,7 +9,7 @@ export default function MiniCard({
   href,
 }: CardAttributes) {
   return (
-    <Link href={href}>
+    <Link href={href} className="w-full">
       <li
         key={title}
         className="col-span-1 flex rounded-md bg-gray-100/70 bg-opacity-30 shadow-md transition-colors hover:bg-gray-200/90 dark:bg-gray-950/50 dark:hover:bg-gray-900/50"