fix: bad breakpoints, padding

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "astro-erudite",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "astro-erudite",
-      "version": "1.2.2",
+      "version": "1.2.3",
       "dependencies": {
         "@astrojs/check": "^0.9.4",
         "@astrojs/markdown-remark": "^6.0.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-erudite",
   "type": "module",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "private": true,
   "scripts": {
     "dev": "astro dev",

src/components/TableOfContents.astro

@@ -42,7 +42,7 @@ function buildToc(headings: Heading[]): Heading[] {
   class="group col-start-2 mx-4 block rounded-xl border p-4 xl:hidden"
 >
   <summary
-    class="flex cursor-pointer items-center justify-between text-xl font-semibold"
+    class="flex cursor-pointer items-center justify-between pb-4 text-xl font-semibold"
   >
     Table of Contents
     <Icon
@@ -56,9 +56,8 @@ function buildToc(headings: Heading[]): Heading[] {
     type="always"
   >
     <nav>
-      <ul class="pt-3">
+      <ul></ul>
       {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
-      </ul>
     </nav>
   </ScrollArea>
 </details>

src/components/TableOfContentsHeading.astro

@@ -10,7 +10,7 @@ const { heading } = Astro.props
 >
   <Link
     href={'#' + heading.slug}
-    class="py-1 underline decoration-transparent underline-offset-[3px] transition-colors duration-200 hover:decoration-inherit"
+    class="underline decoration-transparent underline-offset-[3px] transition-colors duration-200 hover:decoration-inherit py-1 xl:py-0"
   >
     {heading.text}
   </Link>