From 23465084e049249778718753a1689c75b32bebd1 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sat, 17 Jan 2026 20:29:59 +0000
Subject: [PATCH] Generated by Spark: Expand All, Collapse All buttons are too
 big, Maybe just use icon buttons? Don't really need the text, tooltip would
 be nice.

---
 src/components/molecules/ComponentTree.tsx | 45 +++++++++++++---------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/molecules/ComponentTree.tsx b/src/components/molecules/ComponentTree.tsx
index 6290fd4..8c7f7db 100644
--- a/src/components/molecules/ComponentTree.tsx
+++ b/src/components/molecules/ComponentTree.tsx
@@ -4,6 +4,7 @@ import { ComponentTreeNode } from '@/components/atoms/ComponentTreeNode'
 import { PanelHeader } from '@/components/atoms'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { Tree, CaretDown, CaretRight } from '@phosphor-icons/react'
 
 interface ComponentTreeProps {
@@ -116,24 +117,32 @@ export function ComponentTree({
           />
           {components.length > 0 && (
             <div className="flex gap-1">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleExpandAll}
-                className="h-7 w-7 p-0"
-                title="Expand All"
-              >
-                <CaretDown size={16} />
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleCollapseAll}
-                className="h-7 w-7 p-0"
-                title="Collapse All"
-              >
-                <CaretRight size={16} />
-              </Button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleExpandAll}
+                    className="h-7 w-7 p-0"
+                  >
+                    <CaretDown size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Expand All</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleCollapseAll}
+                    className="h-7 w-7 p-0"
+                  >
+                    <CaretRight size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Collapse All</TooltipContent>
+              </Tooltip>
             </div>
           )}
         </div>