UI: Improve design

.changeset/heavy-onions-leave.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix wrong padding

packages/ui/src/components/layout/search-toggle.tsx

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, useCallback } from 'react';
+import { type ButtonHTMLAttributes, useCallback } from 'react';
 import { SearchIcon } from 'lucide-react';
 import { useSearchContext } from '@/contexts/search';
 import { useI18n } from '@/contexts/i18n';
@@ -20,7 +20,7 @@ export function SearchToggle(
           className: props.className,
         }),
       )}
-      data-search
+      data-search=""
       aria-label="Open Search"
       onClick={useCallback(() => {
         setOpenSearch(true);
@@ -40,7 +40,7 @@ export function LargeSearchToggle(
   return (
     <button
       type="button"
-      data-search-full
+      data-search-full=""
       {...props}
       className={cn(
         'inline-flex items-center gap-2 rounded-full border bg-secondary/50 p-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',

packages/ui/src/components/layout/theme-toggle.tsx

@@ -31,7 +31,7 @@ export function ThemeToggle({
         'inline-flex items-center rounded-full border p-0.5',
         className,
       )}
-      data-theme-toggle
+      data-theme-toggle=""
       aria-label="Toggle Theme"
       onClick={onToggle}
       {...props}

packages/ui/src/components/layout/toc.tsx

@@ -38,7 +38,10 @@ export function Toc({ items, header, footer }: TOCProps): ReactElement {
   const { text } = useI18n();
 
   return (
-    <div data-toc className="sticky top-0 flex h-dvh w-[220px] shrink-0 flex-col gap-4 pe-2 pt-12 max-lg:hidden xl:w-[260px]">
+    <div
+      data-toc=""
+      className="sticky top-0 flex h-dvh w-[220px] shrink-0 flex-col gap-4 pe-3 pt-12 max-lg:hidden xl:w-[260px]"
+    >
       {header}
       <h3 className="-mb-1 -ms-0.5 inline-flex items-center gap-1.5 text-sm text-muted-foreground">
         <Text className="size-4" />
@@ -71,7 +74,7 @@ export function TocPopover({
         align="start"
         side="bottom"
         className="flex max-h-[80vh] w-[260px] flex-col gap-4 p-3"
-        data-toc-popover
+        data-toc-popover=""
       >
         {header}
         <TOCItems items={items} isMenu />