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/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

@@ -24,11 +24,18 @@
   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;
+    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">