fixed-review-comments

Signed-off-by: Lucifergene <[email protected]>

Author: Lucifergene

packages/app/src/components/Root/CustomSidebarItem.tsx

@@ -10,6 +10,9 @@ import { useSidebarSelectedBackgroundColor } from '../../hooks/useThemedConfig';
 const StyledSidebarItemWrapper = styled('div')<{
   selectedBackgroundColor: string;
 }>(({ selectedBackgroundColor }) => ({
+  // Add spacing between sidebar items to prevent hover overlap
+  marginBottom: '4px',
+
   // Target the selected/active sidebar item
   '& a[aria-current="page"]': {
     backgroundColor: `${selectedBackgroundColor} !important`,
@@ -27,6 +30,10 @@ const GlobalSidebarStyles: React.FC<{ selectedBackgroundColor: string }> = ({
       [class*="BackstageSidebarItem-selected"] {
         background-color: ${selectedBackgroundColor} !important;
       }
+      /* Add spacing between all sidebar items to prevent hover overlap */
+      [class*="BackstageSidebarItem-root"] {
+        margin-bottom: 4px;
+      }
     `;
     document.head.appendChild(style);
 

packages/app/src/components/Root/Root.tsx

@@ -211,8 +211,7 @@ const SidebarScrollableContent = styled(Box)(({ theme }) => ({
     },
   },
 
-  // Firefox scrollbar - thin and auto-hiding
-  scrollbarWidth: 'thin',
+  // Firefox scrollbar to auto-hide it
   scrollbarColor: 'transparent transparent',
   '&:hover': {
     scrollbarColor: `${
@@ -237,15 +236,13 @@ const renderExpandIcon = (expand: boolean) => {
       fontSize="small"
       style={{
         display: 'flex',
-        marginLeft: 8,
       }}
     />
   ) : (
     <ChevronRightIcon
       fontSize="small"
       style={{
         display: 'flex',
-        marginLeft: 8,
       }}
     />
   );