Correct tab size and adjust toc

src/components/ArticleSearch.svelte

@@ -55,6 +55,7 @@
     }
 
     input {
-      max-inline-size: 100%;
+      inline-size: 100%;
+      margin-block-start: 0.25rem;
     }
 </style>

src/components/Dropdown.svelte

@@ -7,27 +7,27 @@
   let summaryElement: HTMLElement;
 
   function openMenu() {
-      detailsElement.setAttribute("open", "");
+    detailsElement.setAttribute("open", "");
   }
 
   export function closeMenu() {
-      detailsElement.removeAttribute("open");
+    detailsElement.removeAttribute("open");
   }
 
   function handleKeydown(event: KeyboardEvent) {
-      if (event.key === "Escape") closeMenu();
+    if (event.key === "Escape") closeMenu();
 
-      if (event.key === shortcut) {
-          summaryElement.focus();
-          openMenu();
-      } else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) {
-          closeMenu();
-      }
+    if (event.key === shortcut) {
+      summaryElement.focus();
+      openMenu();
+    } else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) {
+      closeMenu();
+    }
   }
 
   function handleClick(event: MouseEvent) {
       if (!detailsElement.contains(event.target as Node)) {
-          closeMenu();
+        closeMenu();
       }
   }
 </script>

src/components/Head.astro

@@ -12,6 +12,6 @@ const { title, description } = Astro.props;
   <meta name="description" content={description} />
   <script is:inline>
     const storedTheme = localStorage.getItem("theme");
-    document.documentElement.classList = storedTheme;
+    document.documentElement.className = storedTheme;
   </script>
 </head>

src/components/TableOfContents.svelte

@@ -1,34 +1,41 @@
 <script lang="ts">
-    import type { MarkdownHeading } from "astro";
+  import type { MarkdownHeading } from "astro";
 
-    export let headings: MarkdownHeading[] = [];
+  export let headings: MarkdownHeading[] = [];
 
-    import Dropdown from "./Dropdown.svelte";
+  import Dropdown from "./Dropdown.svelte";
 </script>
 
 <Dropdown shortcut="C">
-    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
-      <title>Table of contents (Shift + c)</title>
-      <path fill-rule="evenodd" d="M2.625 6.75a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0A.75.75 0 018.25 6h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75zM2.625 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zM7.5 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12A.75.75 0 017.5 12zm-4.875 5.25a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
-    </svg>
-    <ul>
-        {#each headings.filter(({ depth }) => depth === 2) as { slug, text }}
-            <li>
-                <a href="#{slug}">{text}</a>
-            </li>
-        {/each}
-    </ul>
+  <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
+    <title>Table of contents (Shift + c)</title>
+    <path fill-rule="evenodd" d="M2.625 6.75a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0A.75.75 0 018.25 6h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75zM2.625 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zM7.5 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12A.75.75 0 017.5 12zm-4.875 5.25a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
+  </svg>
+  <ul>
+    {#each headings.filter(({ depth }) => depth === 2) as { slug, text }}
+      <li>
+        <a href="#{slug}">{text}</a>
+      </li>
+    {/each}
+  </ul>
 </Dropdown>
 
 <style>
-    ul {
-        position: absolute;
-        border: var(--standard-border);
-        padding: 1rem;
-        padding-inline-start: 2rem;
-        background-color: var(--background-color);
-        inset-block-start: var(--nav-height);
-        margin: 0;
-        inset-inline-end: 0;
-    }
+  ul {
+    position: absolute;
+    border: var(--standard-border);
+    padding-inline-start: 2rem;
+    background-color: var(--background-color);
+    inset-block-start: var(--nav-height);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    inset-inline-end: 0;
+  }
+
+  a {
+    display: block;
+    padding-inline: 1rem;
+    padding-block: 0.25rem;
+  }
 </style>

src/components/ThemeToggle.svelte

@@ -6,7 +6,7 @@
   let theme = "System";
 
   function loadTheme() {
-    theme = localStorage.getItem("theme");
+    theme = localStorage.getItem("theme") || "System";
   }
 
   function saveTheme() {
@@ -15,7 +15,7 @@
 
   loadTheme();
 
-  $: document.documentElement.classList = theme;
+  $: document.documentElement.className = theme;
 </script>
 
 <Dropdown shortcut="T">