chore: remove horizonal padding from routes

src/app/(dashboard)/create-guild/page.tsx

@@ -12,7 +12,7 @@ export const metadata = {
 };
 
 const CreateGuild = () => (
-  <main className="container mx-auto grid max-w-lg gap-8 px-4 py-16">
+  <main className="container mx-auto grid max-w-lg gap-8 py-16">
     <div
       className="-z-10 absolute inset-0 opacity-40 dark:opacity-60"
       style={{

src/app/(dashboard)/explorer/page.tsx

@@ -37,7 +37,7 @@ export default async function Explorer() {
 
   return (
     <>
-      <main className="container mx-auto grid max-w-screen-lg gap-4 px-4 py-8">
+      <main className="container grid gap-4 py-16">
         <section className="pt-6 pb-8">
           <h1
             className="font-black font-display text-5xl tracking-tight"

src/app/(dashboard)/layout.tsx

@@ -1,11 +1,12 @@
+import { DashboardContainer } from "@/components/DashboardContainer";
 import { Header } from "@/components/Header";
 import type { PropsWithChildren } from "react";
 
 const Dashboard = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Header />
-      {children}
+      <DashboardContainer>{children}</DashboardContainer>
     </>
   );
 };

src/components/DashboardContainer.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/cssUtils";
+import { Slot } from "@radix-ui/react-slot";
+import type { HTMLAttributes } from "react";
+
+interface DashboardContainerProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+export const DashboardContainer = ({
+  children,
+  className,
+  asChild = false,
+  ...props
+}: DashboardContainerProps) => {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      className={cn(
+        "mx-auto w-full max-w-screen-lg px-4 sm:px-8 md:px-10",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};