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'>
+                <Tooltip
+                  position='right'
+                  label={expanded ? t`Collapse panels` : t`Expand panels`}
+                >
                   <ActionIcon
                     style={{
                       paddingLeft: '10px'
                     }}
                     onClick={() => setExpanded(!expanded)}
                     variant='transparent'
-                  size='md'
+                    size='lg'
                   >
                     {expanded ? (
-                    <IconLayoutSidebarLeftCollapse opacity={0.5} />
+                      <IconLayoutSidebarLeftCollapse opacity={0.75} />
                     ) : (
-                    <IconLayoutSidebarRightCollapse opacity={0.5} />
+                      <IconLayoutSidebarRightCollapse opacity={0.75} />
                     )}
                   </ActionIcon>
+                </Tooltip>
                 {pluginPanelSet.isLoading && <Loader size='xs' />}
               </Group>
             )}