From 8c6cacae66f2e930dafcbc5478908a9aadbf243b Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 30 Jun 2025 13:14:37 +1000
Subject: [PATCH] Tweak expand icon for panels (#9905)

- Better layout
- Add tooltip
- Add divider
---
 .../src/components/panels/PanelGroup.tsx      | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/panels/PanelGroup.tsx b/src/frontend/src/components/panels/PanelGroup.tsx
index 4bf75e8235..ecb8432998 100644
--- a/src/frontend/src/components/panels/PanelGroup.tsx
+++ b/src/frontend/src/components/panels/PanelGroup.tsx
@@ -269,22 +269,28 @@ function BasePanelGroup({
                 )}
               </Box>
             ))}
+            {collapsible && <Divider />}
             {collapsible && (
               <Group wrap='nowrap' gap='xs'>
-                <ActionIcon
-                  style={{
-                    paddingLeft: '10px'
-                  }}
-                  onClick={() => setExpanded(!expanded)}
-                  variant='transparent'
-                  size='md'
+                <Tooltip
+                  position='right'
+                  label={expanded ? t`Collapse panels` : t`Expand panels`}
                 >
-                  {expanded ? (
-                    <IconLayoutSidebarLeftCollapse opacity={0.5} />
-                  ) : (
-                    <IconLayoutSidebarRightCollapse opacity={0.5} />
-                  )}
-                </ActionIcon>
+                  <ActionIcon
+                    style={{
+                      paddingLeft: '10px'
+                    }}
+                    onClick={() => setExpanded(!expanded)}
+                    variant='transparent'
+                    size='lg'
+                  >
+                    {expanded ? (
+                      <IconLayoutSidebarLeftCollapse opacity={0.75} />
+                    ) : (
+                      <IconLayoutSidebarRightCollapse opacity={0.75} />
+                    )}
+                  </ActionIcon>
+                </Tooltip>
                 {pluginPanelSet.isLoading && <Loader size='xs' />}
               </Group>
             )}