🛠️ Update global layout and styling for header, sidebar, and page cards + improve responsive

src/components/layout/header.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <header
-  class="sticky top-0 w-full bg-neutral-100 px-4 py-4 dark:bg-neutral-950"
+  class="sticky top-0 z-50 w-full bg-neutral-100 px-2 py-3 md:px-4 md:py-4 dark:bg-neutral-950"
 >
   <nav class="flex w-full items-center justify-between">
     <div class="flex items-center space-x-3">

src/components/layout/sidebar.svelte

@@ -9,9 +9,9 @@
 <section>
   <aside
     class={cn(
-      "md:fixed md:left-0 md:h-[calc(100vh-5rem)]",
+      "md:fixed md:left-1 md:h-[calc(100vh-4.5rem)]",
       "overflow-x-hidden",
-      "w-54 pr-2 pl-3",
+      "w-54 pr-2 pl-2",
       "hidden flex-col space-y-3 md:flex",
       "bg-neutral-100 dark:bg-neutral-950",
     )}
@@ -24,7 +24,7 @@
       <ShowCategories />
     </nav>
   </aside>
-  <main class={cn("mb-4 px-4 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}>
+  <main class={cn("px-2 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}>
     <slot />
   </main>
 </section>

src/components/pageCard.svelte

@@ -11,20 +11,24 @@
   let { children, contentCardClass, containerClass }: PageCardProps = $props();
 </script>
 
-<div
-  class={cn(
-    "mt-2.5 overflow-hidden",
-    "rounded-md border border-neutral-200 dark:border-neutral-800",
-    "bg-white dark:bg-neutral-900/40",
-    containerClass,
-  )}
->
+<div class="p-[1px]">
   <div
     class={cn(
-      "max-h-[calc(100vh-8.2rem)] min-h-[calc(100vh-8.2rem)] overflow-y-auto",
-      contentCardClass,
+      "overflow-hidden",
+      "rounded-md border border-neutral-200 dark:border-neutral-800",
+      "bg-white dark:bg-neutral-900/40",
+      "shadow-xs",
+      containerClass,
     )}
   >
-    {@render children?.()}
+    <div
+      class={cn(
+        "max-h-[calc(100vh-4.5rem)] min-h-[calc(100vh-4.5rem)]",
+        "overflow-hidden overflow-y-auto",
+        contentCardClass,
+      )}
+    >
+      {@render children?.()}
+    </div>
   </div>
 </div>

src/routes/+page.svelte

@@ -82,7 +82,10 @@
   placeholder="Search..."
 />
 
-<PageCard>
+<PageCard
+  containerClass="mt-2"
+  contentCardClass="max-h-[calc(100vh-7.6rem)] min-h-[calc(100vh-7.6rem)]"
+>
   <PageHeader>
     <div
       class="flex items-center space-x-2 text-neutral-500 dark:text-neutral-400"

src/routes/directory/[category]/+page.svelte

@@ -76,7 +76,10 @@
   placeholder={`Search ${directoryData.category}'s SVGs...`}
 />
 
-<PageCard>
+<PageCard
+  containerClass="mt-2"
+  contentCardClass="max-h-[calc(100vh-7.6rem)] min-h-[calc(100vh-7.6rem)]"
+>
   <PageHeader>
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"

src/routes/docs/[...slug]/+page.svelte

@@ -26,10 +26,7 @@
   <meta name="description" content={data.document.description} />
 </svelte:head>
 
-<PageCard
-  containerClass="mt-0"
-  contentCardClass="min-h-[calc(100vh-5.4rem)] md:min-h-[calc(100vh-5rem)]"
->
+<PageCard>
   <PageHeader>
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"

src/routes/extensions/+page.svelte

@@ -53,10 +53,7 @@
   />
 </svelte:head>
 
-<PageCard
-  containerClass="mt-0"
-  contentCardClass="max-h-[calc(100vh-5.2rem)] min-h-[calc(100vh-5.2rem)]"
->
+<PageCard>
   <PageHeader>
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"

src/routes/favorites/+page.svelte

@@ -73,7 +73,10 @@
   placeholder="Search..."
 />
 
-<PageCard>
+<PageCard
+  containerClass="mt-2"
+  contentCardClass="max-h-[calc(100vh-7.6rem)] min-h-[calc(100vh-7.6rem)]"
+>
   <PageHeader>
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"