Tweak expand icon for panels (#9905)

- Better layout
- Add tooltip
- Add divider

src/frontend/src/components/panels/PanelGroup.tsx

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