fix button

lightrag/api/graph_viewer_webui/src/components/FullScreenControl.tsx

@@ -12,11 +12,11 @@ const FullScreenControl = () => {
   return (
     <>
       {isFullScreen ? (
-        <Button variant={controlButtonVariant} onClick={toggle} tooltip="Windowed">
+        <Button variant={controlButtonVariant} onClick={toggle} tooltip="Windowed" size="icon">
           <MinimizeIcon />
         </Button>
       ) : (
-        <Button variant={controlButtonVariant} onClick={toggle} tooltip="Full Screen">
+        <Button variant={controlButtonVariant} onClick={toggle} tooltip="Full Screen" size="icon">
           <MaximizeIcon />
         </Button>
       )}

lightrag/api/graph_viewer_webui/src/components/LayoutsControl.tsx

@@ -58,6 +58,7 @@ const WorkerLayoutControl = ({ layout, autoRunFor }: WorkerLayoutControlProps) =
 
   return (
     <Button
+      size="icon"
       onClick={() => (isRunning ? stop() : start())}
       tooltip={isRunning ? 'Stop the layout animation' : 'Start the layout animation'}
       variant={controlButtonVariant}
@@ -142,6 +143,7 @@ const LayoutsControl = () => {
         <Popover open={opened} onOpenChange={setOpened}>
           <PopoverTrigger asChild>
             <Button
+              size="icon"
               variant={controlButtonVariant}
               onClick={() => setOpened((e: boolean) => !e)}
               tooltip="Layout Graph"

lightrag/api/graph_viewer_webui/src/components/Settings.tsx

@@ -118,7 +118,7 @@ export default function Settings() {
   return (
     <Popover open={opened} onOpenChange={setOpened}>
       <PopoverTrigger asChild>
-        <Button variant={controlButtonVariant} tooltip="Settings">
+        <Button variant={controlButtonVariant} tooltip="Settings" size="icon">
           <SettingsIcon />
         </Button>
       </PopoverTrigger>

lightrag/api/graph_viewer_webui/src/components/ThemeToggle.tsx

@@ -14,13 +14,23 @@ export default function ThemeToggle() {
 
   if (theme === 'dark') {
     return (
-      <Button onClick={setLight} variant={controlButtonVariant} tooltip="Switch to light theme">
+      <Button
+        onClick={setLight}
+        variant={controlButtonVariant}
+        tooltip="Switch to light theme"
+        size="icon"
+      >
         <MoonIcon />
       </Button>
     )
   }
   return (
-    <Button onClick={setDark} variant={controlButtonVariant} tooltip="Switch to dark theme">
+    <Button
+      onClick={setDark}
+      variant={controlButtonVariant}
+      tooltip="Switch to dark theme"
+      size="icon"
+    >
       <SunIcon />
     </Button>
   )

lightrag/api/graph_viewer_webui/src/components/ZoomControl.tsx

@@ -4,7 +4,6 @@ import Button from '@/components/ui/Button'
 import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
 import { controlButtonVariant } from '@/lib/constants'
 
-
 /**
  * Component that provides zoom controls for the graph viewer.
  */
@@ -17,13 +16,18 @@ const ZoomControl = () => {
 
   return (
     <>
-      <Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip="Zoom In">
+      <Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip="Zoom In" size="icon">
         <ZoomInIcon />
       </Button>
-      <Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip="Zoom Out">
+      <Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip="Zoom Out" size="icon">
         <ZoomOutIcon />
       </Button>
-      <Button variant={controlButtonVariant} onClick={handleResetZoom} tooltip="Reset Zoom">
+      <Button
+        variant={controlButtonVariant}
+        onClick={handleResetZoom}
+        tooltip="Reset Zoom"
+        size="icon"
+      >
         <FullscreenIcon />
       </Button>
     </>

lightrag/api/graph_viewer_webui/src/components/ui/Button.tsx

@@ -39,10 +39,7 @@ interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { className, variant, tooltip, size = 'icon', side = 'right', asChild = false, ...props },
-    ref
-  ) => {
+  ({ className, variant, tooltip, size, side = 'right', asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button'
     if (!tooltip) {
       return (