From 83ec150266c7a57609cbeeefc372d61bc022636b Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 24 Sep 2025 11:25:46 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Update=20global=20layou?=
 =?UTF-8?q?t=20and=20styling=20for=20header,=20sidebar,=20and=20page=20car?=
 =?UTF-8?q?ds=20+=20improve=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/header.svelte          |  2 +-
 src/components/layout/sidebar.svelte         |  6 ++---
 src/components/pageCard.svelte               | 26 +++++++++++---------
 src/routes/+page.svelte                      |  5 +++-
 src/routes/directory/[category]/+page.svelte |  5 +++-
 src/routes/docs/[...slug]/+page.svelte       |  5 +---
 src/routes/extensions/+page.svelte           |  5 +---
 src/routes/favorites/+page.svelte            |  5 +++-
 8 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/components/layout/header.svelte b/src/components/layout/header.svelte
index ba5b5e6..98779a2 100644
--- a/src/components/layout/header.svelte
+++ b/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">
diff --git a/src/components/layout/sidebar.svelte b/src/components/layout/sidebar.svelte
index 30a9259..fbbf470 100644
--- a/src/components/layout/sidebar.svelte
+++ b/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>
diff --git a/src/components/pageCard.svelte b/src/components/pageCard.svelte
index ec098ce..bae8938 100644
--- a/src/components/pageCard.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 77948d8..a28f932 100644
--- a/src/routes/+page.svelte
+++ b/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"
diff --git a/src/routes/directory/[category]/+page.svelte b/src/routes/directory/[category]/+page.svelte
index a3ca100..36bd291 100644
--- a/src/routes/directory/[category]/+page.svelte
+++ b/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"
diff --git a/src/routes/docs/[...slug]/+page.svelte b/src/routes/docs/[...slug]/+page.svelte
index d2b7fff..2da3aa3 100644
--- a/src/routes/docs/[...slug]/+page.svelte
+++ b/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"
diff --git a/src/routes/extensions/+page.svelte b/src/routes/extensions/+page.svelte
index 675d493..6f3ad11 100644
--- a/src/routes/extensions/+page.svelte
+++ b/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"
diff --git a/src/routes/favorites/+page.svelte b/src/routes/favorites/+page.svelte
index a68cd68..cd5bf4c 100644
--- a/src/routes/favorites/+page.svelte
+++ b/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"