diff --git a/web-app/src/hooks/__tests__/useMediaQuery.test.ts b/web-app/src/hooks/__tests__/useMediaQuery.test.ts index 48ca5c841..653511657 100644 --- a/web-app/src/hooks/__tests__/useMediaQuery.test.ts +++ b/web-app/src/hooks/__tests__/useMediaQuery.test.ts @@ -266,14 +266,7 @@ describe('useSmallScreenStore', () => { }) describe('useSmallScreen', () => { - beforeEach(() => { - // Reset the store state before each test - act(() => { - useSmallScreenStore.getState().setIsSmallScreen(false) - }) - }) - - it('should return small screen state and update store', () => { + it('should return small screen state', () => { const mockMediaQueryList = { matches: true, addEventListener: vi.fn(), @@ -285,7 +278,6 @@ describe('useSmallScreen', () => { const { result } = renderHook(() => useSmallScreen()) expect(result.current).toBe(true) - expect(useSmallScreenStore.getState().isSmallScreen).toBe(true) }) it('should update when media query changes', () => { @@ -309,7 +301,6 @@ describe('useSmallScreen', () => { }) expect(result.current).toBe(true) - expect(useSmallScreenStore.getState().isSmallScreen).toBe(true) }) it('should use correct media query for small screen detection', () => { @@ -325,20 +316,4 @@ describe('useSmallScreen', () => { expect(mockMatchMedia).toHaveBeenCalledWith('(max-width: 768px)') }) - - it('should persist state across multiple hook instances', () => { - const mockMediaQueryList = { - matches: true, - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - } - - mockMatchMedia.mockReturnValue(mockMediaQueryList) - - const { result: result1 } = renderHook(() => useSmallScreen()) - const { result: result2 } = renderHook(() => useSmallScreen()) - - expect(result1.current).toBe(true) - expect(result2.current).toBe(true) - }) }) \ No newline at end of file diff --git a/web-app/src/hooks/useMediaQuery.ts b/web-app/src/hooks/useMediaQuery.ts index 9e479eec4..d6d5881a9 100644 --- a/web-app/src/hooks/useMediaQuery.ts +++ b/web-app/src/hooks/useMediaQuery.ts @@ -77,14 +77,7 @@ export function useMediaQuery( return matches || false } -// Specific hook for small screen detection with state management +// Specific hook for small screen detection export const useSmallScreen = (): boolean => { - const { isSmallScreen, setIsSmallScreen } = useSmallScreenStore() - const mediaQuery = useMediaQuery('(max-width: 768px)') - - useEffect(() => { - setIsSmallScreen(mediaQuery) - }, [mediaQuery, setIsSmallScreen]) - - return isSmallScreen + return useMediaQuery('(max-width: 768px)') }