creevey 0.10.0-beta.8 → 0.10.0-rc.0

package/src/client/shared/components/ImagesView/SideBySideView.tsx

@@ -1,6 +1,6 @@
 import React, { JSX, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Loader } from '@storybook/components';
-import { styled, withTheme } from '@storybook/theming';
+import { Loader } from 'storybook/internal/components';
+import { styled, withTheme } from 'storybook/theming';
 import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
 import { useApplyScale, useLoadImages, useResizeObserver, getBorderSize } from '../../helpers.js';
 import { readyForCapture } from '../../../addon/readyForCapture.js';

package/src/client/shared/components/ImagesView/SlideView.tsx

@@ -1,6 +1,6 @@
 import React, { JSX, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Loader } from '@storybook/components';
-import { styled, withTheme } from '@storybook/theming';
+import { Loader } from 'storybook/internal/components';
+import { styled, withTheme } from 'storybook/theming';
 import { getBorderColor, themeBorderColors, ViewPropsWithTheme } from './common.js';
 import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
 import { readyForCapture } from '../../../addon/readyForCapture.js';

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -1,6 +1,6 @@
 import React, { JSX, useCallback, useEffect, useRef, useState } from 'react';
-import { Loader } from '@storybook/components';
-import { styled, withTheme } from '@storybook/theming';
+import { Loader } from 'storybook/internal/components';
+import { styled, withTheme } from 'storybook/theming';
 import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
 import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
 import { readyForCapture } from '../../../addon/readyForCapture.js';
@@ -46,6 +46,24 @@ export const SwapView = withTheme(({ theme, expect, actual, diff }: ViewPropsWit
     setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
   }, []);
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'Space' && e.altKey) {
+        e.preventDefault();
+        handleChangeView();
+      }
+    },
+    [handleChangeView],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     if (loaded) readyForCapture();
   }, [loaded]);

package/src/client/shared/components/ImagesView/common.ts

@@ -1,4 +1,4 @@
-import { Color, Theme } from '@storybook/theming';
+import { Color, Theme } from 'storybook/theming';
 
 export const themeBorderColors = {
   actual: 'negative',

package/src/client/shared/components/PageFooter/PageFooter.tsx

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { Paging } from './Paging.js';
 
 export interface PageFooterProps {

package/src/client/shared/components/PageFooter/Paging.tsx

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { TabButton } from '@storybook/components';
+import { TabButton } from 'storybook/internal/components';
 
 export interface PagingProps {
   activePage: string;

package/src/client/shared/components/PageHeader/ImagePreview.tsx

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme, Theme } from 'storybook/theming';
 
 const IMG_SIZE = 64;
 const DIAG_LENGTH = (2 * (IMG_SIZE - 8) ** 2) ** (1 / 2);
@@ -70,6 +70,7 @@ export const ImagePreview = withTheme(
       onClick(imageName);
     };
 
+    // TODO Add image name as a title
     return (
       <Button
         onClick={handleClick}

package/src/client/shared/components/PageHeader/PageHeader.tsx

@@ -1,11 +1,12 @@
-import React, { JSX, useEffect } from 'react';
-import { Tabs } from '@storybook/components';
+import React, { JSX, useContext, useEffect } from 'react';
+import { Tabs } from 'storybook/internal/components';
 import { CloseAltIcon } from '@storybook/icons';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme, Theme } from 'storybook/theming';
 import { ImagesViewMode, Images } from '../../../../types.js';
 import { getImageUrl } from '../../helpers.js';
 import { ImagePreview } from './ImagePreview.js';
 import { viewModes } from '../../viewMode.js';
+import { CreeveyContext } from '../../../web/CreeveyContext.js';
 
 interface PageHeaderProps {
   title: string[];
@@ -20,14 +21,14 @@ interface PageHeaderProps {
 }
 
 const Container = styled.div({
-  margin: '24px 44px 0',
+  marginTop: '24px',
 });
 
 const ErrorContainer = withTheme(
   styled.div<{ theme: Theme }>(({ theme }) => ({
     marginTop: '8px',
     padding: '8px',
-    background: theme.background.negative,
+    background: `${theme.background.negative}20`,
     color: theme.color.negative,
     borderRadius: '2px',
     display: 'flex',
@@ -47,8 +48,19 @@ const ErrorContainer = withTheme(
   })),
 );
 
+const UpdateModeBanner = withTheme(
+  styled.div(({ theme }) => ({
+    padding: '8px 32px',
+    backgroundColor: `${theme.color.positive}20`,
+    color: theme.color.positive,
+    fontSize: '12px',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  })),
+);
+
 const H1 = styled.h1({
-  margin: 0,
+  marginLeft: '44px',
   marginBottom: '8px',
 });
 
@@ -76,6 +88,7 @@ export function PageHeader({
   onImageChange,
   onViewModeChange,
 }: PageHeaderProps): JSX.Element | null {
+  const { isReport, isUpdateMode } = useContext(CreeveyContext);
   const imageEntires = Object.entries(images) as [string, Images][];
 
   const handleViewModeChange = (mode: string): void => {
@@ -110,7 +123,7 @@ export function PageHeader({
             <ImagePreview
               key={name}
               imageName={name}
-              url={`${getImageUrl(title, name)}/${image.actual}`}
+              url={`${getImageUrl(title, name, isReport)}/${image.actual}`}
               isActive={name === imageName}
               onClick={onImageChange}
               error={imagesWithError.includes(name)}
@@ -118,6 +131,9 @@ export function PageHeader({
           ))}
         </ImagesEntriesContainer>
       ) : null}
+      {isUpdateMode && (
+        <UpdateModeBanner>Update Mode: Review and approve screenshots from previous test runs</UpdateModeBanner>
+      )}
       {showViewModes && (
         <Tabs selected={viewMode} actions={{ onSelect: handleViewModeChange }}>
           {viewModes.map((x) => (

package/src/client/shared/components/ResultsPage.tsx

@@ -1,12 +1,13 @@
-import React, { JSX, useState } from 'react';
-import { Placeholder, ScrollArea } from '@storybook/components';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import React, { JSX, useCallback, useContext, useEffect, useState } from 'react';
+import { Placeholder, ScrollArea } from 'storybook/internal/components';
+import { styled, withTheme, Theme } from 'storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';
 import { PageHeader } from './PageHeader/PageHeader.js';
 import { PageFooter } from './PageFooter/PageFooter.js';
 import { getImageUrl } from '../helpers.js';
-import { getViewMode, VIEW_MODE_KEY } from '../viewMode.js';
+import { getViewMode, VIEW_MODE_KEY, viewModes } from '../viewMode.js';
 import { ImagesViewMode, TestResult } from '../../../types.js';
+import { CreeveyContext } from '../../web/CreeveyContext.js';
 
 interface ResultsPageProps {
   path: string[];
@@ -65,8 +66,9 @@ export function ResultsPageInternal({
   onRetryChange,
 }: ResultsPageProps): JSX.Element {
   const result = results[retry - 1] ?? {};
+  const { isReport } = useContext(CreeveyContext);
   const [viewMode, setViewMode] = useState<ImagesViewMode>(getViewMode());
-  const url = getImageUrl(path, imageName);
+  const url = getImageUrl(path, imageName, isReport);
   const image = result.images?.[imageName];
   const canApprove = Boolean(image && approved?.[imageName] != retry - 1 && result.status != 'success');
   const hasDiffAndExpect = canApprove && Boolean(image?.diff && image.expect);
@@ -77,10 +79,31 @@ export function ResultsPageInternal({
       )
     : [];
 
-  const handleChangeViewMode = (mode: ImagesViewMode): void => {
-    localStorage.setItem(VIEW_MODE_KEY, mode);
-    setViewMode(mode);
-  };
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!canApprove) return;
+      if (e.code === 'Tab') {
+        e.preventDefault();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (e.shiftKey) setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) - 1) % viewModes.length)!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        else setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) + 1) % viewModes.length)!);
+      }
+    },
+    [canApprove],
+  );
+
+  useEffect(() => {
+    localStorage.setItem(VIEW_MODE_KEY, viewMode);
+  }, [viewMode]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
 
   return (
     <Container height={height}>
@@ -92,7 +115,7 @@ export function ResultsPageInternal({
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
-          onViewModeChange={handleChangeViewMode}
+          onViewModeChange={setViewMode}
           onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />

package/src/client/shared/creeveyClientApi.ts

@@ -12,9 +12,11 @@ export interface CreeveyClientApi {
 
 export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   let clientApiResolver: (api: CreeveyClientApi) => void = noop;
+  let clientApiRejecter: (error: Error | Event) => void = noop;
   const updateListeners = new Set<(update: CreeveyUpdate) => void>();
   let statusRequest: Promise<CreeveyStatus> | null = null;
   let statusResolver: (status: CreeveyStatus) => void = noop;
+  let isUpdateMode = false;
 
   const ws = new WebSocket(`ws://${getConnectionUrl()}`);
 
@@ -22,12 +24,24 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
     ws.send(JSON.stringify(request));
   }
 
+  ws.addEventListener('error', (event) => {
+    clientApiRejecter(event);
+  });
+
   ws.addEventListener('open', () => {
     clientApiResolver({
       start(ids: string[]) {
+        if (isUpdateMode) {
+          console.warn('Tests cannot be started in Update Mode. This mode is for approving screenshots only.');
+          return;
+        }
         send({ type: 'start', payload: ids });
       },
       stop() {
+        if (isUpdateMode) {
+          console.warn('Tests cannot be stopped in Update Mode. This mode is for approving screenshots only.');
+          return;
+        }
         send({ type: 'stop' });
       },
       approve(id: string, retry: number, image: string) {
@@ -57,6 +71,7 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
         fn(data.payload);
       });
     if (data.type == 'status') {
+      isUpdateMode = data.payload.isUpdateMode;
       statusResolver(data.payload);
       statusResolver = noop;
       statusRequest = null;
@@ -64,5 +79,8 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   });
   // TODO Reconnect
 
-  return new Promise((resolve) => (clientApiResolver = resolve));
+  return new Promise((resolve, reject) => {
+    clientApiResolver = resolve;
+    clientApiRejecter = reject;
+  });
 }

package/src/client/shared/helpers.ts

@@ -1,4 +1,3 @@
-import { themes, ThemeVars } from '@storybook/theming';
 import { parse, stringify } from 'qs';
 import { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { TestData, isTest, isDefined, TestStatus, CreeveySuite, CreeveyTest, CreeveyStatus } from '../../types.js';
@@ -300,12 +299,14 @@ export function getConnectionUrl(): string {
     .join(':');
 }
 
-export function getImageUrl(path: string[], imageName: string): string {
+export function getImageUrl(path: string[], imageName: string, isReport?: boolean): string {
   // path => [title, story, test, browser]
   const browser = path.slice(-1)[0];
   const imagesUrl = window.location.host
     ? `${window.location.protocol}//${getConnectionUrl()}${
-        window.location.pathname == '/' ? '/report' : window.location.pathname.split('/').slice(0, -1).join('/')
+        window.location.pathname == '/' && !isReport
+          ? '/report'
+          : window.location.pathname.split('/').slice(0, -1).join('/')
       }/${encodeURI(path.slice(0, -1).join('/'))}`
     : encodeURI(path.slice(0, -1).join('/'));
 
@@ -393,27 +394,6 @@ export function useCalcScale(diffImageRef: RefObject<HTMLImageElement>, loaded:
   return scale;
 }
 
-const CREEVEY_THEME = 'Creevey_theme';
-
-function isTheme(theme?: string | null): theme is ThemeVars['base'] {
-  return isDefined(theme) && Object.prototype.hasOwnProperty.call(themes, theme);
-}
-
-function initialTheme(): ThemeVars['base'] {
-  const theme = localStorage.getItem(CREEVEY_THEME);
-  return isTheme(theme) ? theme : 'light';
-}
-
-export function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void] {
-  const [theme, setTheme] = useState<ThemeVars['base']>(initialTheme());
-
-  useEffect(() => {
-    localStorage.setItem(CREEVEY_THEME, theme);
-  }, [theme]);
-
-  return [theme, setTheme];
-}
-
 export function setSearchParams(testPath: string[]): void {
   const pageUrl = `?${stringify({ testPath })}`;
   window.history.pushState({ testPath }, '', pageUrl);

package/src/client/web/CreeveyApp.tsx

@@ -1,6 +1,6 @@
 import React, { JSX, useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
-import { ensure, styled, ThemeProvider, themes, withTheme } from '@storybook/theming';
+import { ensure, styled, ThemeProvider, themes, withTheme } from 'storybook/theming';
 import { CreeveyUpdate, CreeveySuite, isDefined, CreeveyTest } from '../../types.js';
 import { CreeveyClientApi } from '../shared/creeveyClientApi.js';
 import {
@@ -11,17 +11,17 @@ import {
   getTestByPath,
   removeTests,
   getTestPath,
-  useTheme,
   setSearchParams,
   getTestPathFromSearch,
   CreeveyViewFilter,
   getFailedTests,
 } from '../shared/helpers.js';
-import { CreeveyContext } from './CreeveyContext.js';
+import { CreeveyContext, FocusableItem } from './CreeveyContext.js';
 import { KeyboardEvents } from './KeyboardEventsContext.js';
 import { SideBar } from './CreeveyView/SideBar/index.js';
 import { ResultsPage } from '../shared/components/ResultsPage.js';
 import { Toggle } from './CreeveyView/SideBar/Toggle.js';
+import { useTheme } from './themes.js';
 
 export interface CreeveyAppProps {
   api?: CreeveyClientApi;
@@ -29,6 +29,7 @@ export interface CreeveyAppProps {
     tests: CreeveySuite;
     isRunning: boolean;
     isReport: boolean;
+    isUpdateMode: boolean;
   };
 }
 
@@ -59,8 +60,9 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   const failedTests = useMemo(() => getFailedTests(tests), [tests]);
 
   const [retry, setRetry] = useState(openedTest?.results?.length ?? 0);
-  const result = openedTest?.results?.[retry - 1] ?? { images: {} };
-  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
+  const result = useMemo(() => openedTest?.results?.[retry - 1], [openedTest, retry]);
+  const [imageName, setImageName] = useState(Object.keys(result?.images ?? {})[0] ?? '');
+  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
   const canApprove = useMemo(
     () =>
       Boolean(
@@ -94,6 +96,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
     (test: CreeveyTest): void => {
       const testPath = getTestPath(test);
       setSearchParams(testPath);
+      setSidebarFocusedItem(testPath);
       updateTests((draft) => {
         openSuite(draft, testPath, true);
         openTest(testPath);
@@ -103,11 +106,24 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   );
 
   const handleGoToNextFailedTest = useCallback(() => {
-    if (failedTests.length <= 1) return;
+    if (failedTests.length == 0) return;
     const currentTest = failedTests.findIndex((t) => t.id === openedTest?.id);
-    const nextFailedTest = failedTests[currentTest + 1] || failedTests[0];
-    handleOpenTest(nextFailedTest);
-  }, [failedTests, handleOpenTest, openedTest?.id]);
+    const failedImages = Object.entries(result?.images ?? {})
+      .filter(([name, image]) =>
+        // TODO Move to helpers, it duplicates in a few places
+        Boolean(image?.error != null && openedTest?.approved?.[name] != retry - 1 && result?.status != 'success'),
+      )
+      .map(([name]) => name);
+    if (
+      failedImages.length > 1 &&
+      (failedTests.length == 1 || failedImages.indexOf(imageName) < failedImages.length - 1)
+    ) {
+      setImageName((name) => failedImages[failedImages.indexOf(name) + 1] ?? failedImages[0]);
+    } else {
+      const nextFailedTest = failedTests[currentTest + 1] ?? failedTests[0];
+      handleOpenTest(nextFailedTest);
+    }
+  }, [failedTests, handleOpenTest, openedTest, retry, result, imageName]);
 
   const handleImageApproveNew = useCallback((): void => {
     const id = openedTest?.id;
@@ -122,6 +138,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   }, [handleImageApproveNew, handleGoToNextFailedTest]);
 
   const handleApproveAll = useCallback(() => {
+    // TODO Update handled incorrectly
     api?.approveAll();
   }, [api]);
 
@@ -189,12 +206,16 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
       value={{
         isReport: initialState.isReport,
         isRunning,
+        onImageNext: canApprove ? handleGoToNextFailedTest : undefined,
         onImageApprove: canApprove ? handleImageApproveAndGoNext : undefined,
         onApproveAll: handleApproveAll,
         onStart: handleStart,
         onStop: handleStop,
         onSuiteOpen: handleSuiteOpen,
         onSuiteToggle: handleSuiteToggle,
+        sidebarFocusedItem,
+        setSidebarFocusedItem,
+        isUpdateMode: initialState.isUpdateMode,
       }}
     >
       <ThemeProvider theme={ensure(themes[theme])}>

package/src/client/web/CreeveyContext.tsx

@@ -1,26 +1,37 @@
 import React, { useContext } from 'react';
 import { CreeveySuite, noop } from '../../types.js';
 
+export type SuitePath = string[];
+export type FocusableItem = null | SuitePath;
+
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
+  isUpdateMode: boolean;
   onStop: () => void;
+  onImageNext?: () => void;
   onImageApprove?: () => void;
   onApproveAll: () => void;
   onStart: (rootSuite: CreeveySuite) => void;
   onSuiteOpen: (path: string[], opened: boolean) => void;
   onSuiteToggle: (path: string[], checked: boolean) => void;
+  sidebarFocusedItem: FocusableItem;
+  setSidebarFocusedItem: (item: FocusableItem) => void;
 }
 
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  isUpdateMode: false,
+  onImageNext: noop,
   onImageApprove: noop,
   onApproveAll: noop,
   onStop: noop,
   onStart: noop,
   onSuiteOpen: noop,
   onSuiteToggle: noop,
+  sidebarFocusedItem: [],
+  setSidebarFocusedItem: noop,
 });
 
 export const useCreeveyContext = () => useContext(CreeveyContext);

package/src/client/web/CreeveyLoader.tsx

@@ -1,6 +1,6 @@
 import React, { JSX } from 'react';
-import { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from '@storybook/theming';
-import { useTheme } from '../shared/helpers.js';
+import { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from 'storybook/theming';
+import { useTheme } from './themes.js';
 
 const Container = withTheme(
   styled.div(({ theme }) => ({

package/src/client/web/CreeveyView/SideBar/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React, { JSX } from 'react';
-import { styled, Theme, withTheme } from '@storybook/theming';
+import React, { Component, JSX } from 'react';
+import { styled, Theme, withTheme } from 'storybook/theming';
 import { CircleIcon, CheckIcon } from '@storybook/icons';
 import { transparentize } from 'polished';
 
@@ -76,7 +76,7 @@ export const CheckboxContainer = styled.span({
   lineHeight: '18px',
 });
 
-export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+export class Checkbox extends Component<CheckboxProps, CheckboxState> {
   state: CheckboxState = { indeterminate: false };
 
   handleIndeterminateChange = (value: boolean): void => {

package/src/client/web/CreeveyView/SideBar/Search.tsx

@@ -1,7 +1,7 @@
-import React, { JSX, ChangeEvent, useContext, useRef, useState } from 'react';
+import React, { JSX, ChangeEvent, useRef, useState } from 'react';
 import { SearchIcon, CloseAltIcon } from '@storybook/icons';
-import { styled, Theme, withTheme } from '@storybook/theming';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { styled, Theme, withTheme } from 'storybook/theming';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 interface SearchProps {
   onChange: (arg: string) => void;
@@ -100,7 +100,7 @@ const FilterForm = withTheme(
 );
 
 export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
-  const { setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { setSidebarFocusedItem } = useCreeveyContext();
   const [focussed, onSetFocussed] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
 

package/src/client/web/CreeveyView/SideBar/SideBar.tsx

@@ -1,7 +1,7 @@
 import React, { JSX, createContext } from 'react';
 import { transparentize } from 'polished';
-import { ScrollArea } from '@storybook/components';
-import { styled, Theme, withTheme } from '@storybook/theming';
+import { ScrollArea } from 'storybook/internal/components';
+import { styled, Theme, withTheme } from 'storybook/theming';
 import { SideBarHeader } from './SideBarHeader.js';
 import { CreeveySuite, CreeveyTest, noop, isTest } from '../../../../types.js';
 import {
@@ -47,6 +47,12 @@ const ScrollContainer = styled.div({
   left: '0',
 });
 
+const StyledScrollArea = styled(ScrollArea)({
+  '& > [data-state="visible"]': {
+    zIndex: 5,
+  },
+});
+
 const Shadow = withTheme(
   styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
     [position]: '0px',
@@ -62,14 +68,13 @@ const SelectAllContainer = styled.div({
 });
 
 const TestsContainer = styled.div({
-  marginBottom: '8px',
   position: 'relative',
   height: '100%',
 });
 
 const Divider = withTheme(
   styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
-    ...(position === 'top' ? { position: 'absolute' } : { position: 'relative', bottom: '8px', marginBottom: '-8px' }),
+    ...(position === 'top' ? { position: 'absolute' } : { position: 'relative', bottom: '8px' }),
     height: '8px',
     width: '100%',
     zIndex: 4,
@@ -102,7 +107,7 @@ export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: Si
           canStart={countCheckedTests !== 0}
         />
         <ScrollContainer>
-          <ScrollArea vertical>
+          <StyledScrollArea vertical>
             <Shadow position="top" />
             <TestsContainer>
               <Divider position="top" />
@@ -120,7 +125,7 @@ export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: Si
               )}
             </TestsContainer>
             <Divider position="bottom" />
-          </ScrollArea>
+          </StyledScrollArea>
           <Shadow position="bottom" />
         </ScrollContainer>
         <SideBarFooter />