diff --git a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
index f7acb778..3089e79f 100644
--- a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
+++ b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
@@ -14,8 +14,8 @@ export const useFixedTableHeader = () => {
});
useEffect(() => {
- const header = document.querySelector('.ag-header');
- const root = document.querySelector('.ag-root');
+ const header = document.querySelector('main .ag-header');
+ const root = document.querySelector('main .ag-root');
if (isNotPastTableIntersection || !tableInView) {
header?.classList.remove('ag-header-fixed');
diff --git a/src/renderer/features/shared/components/animated-page.tsx b/src/renderer/features/shared/components/animated-page.tsx
index 25b6d485..a3dfb1ef 100644
--- a/src/renderer/features/shared/components/animated-page.tsx
+++ b/src/renderer/features/shared/components/animated-page.tsx
@@ -7,7 +7,7 @@ interface AnimatedPageProps {
children: ReactNode;
}
-const StyledAnimatedPage = styled(motion.div)`
+const StyledAnimatedPage = styled(motion.main)`
position: relative;
display: flex;
flex-direction: column;
diff --git a/src/renderer/layouts/default-layout.tsx b/src/renderer/layouts/default-layout.tsx
index 7781e357..33eb59f8 100644
--- a/src/renderer/layouts/default-layout.tsx
+++ b/src/renderer/layouts/default-layout.tsx
@@ -28,7 +28,7 @@ if (!isElectron()) {
const Layout = styled.div`
display: grid;
grid-template-areas:
- 'main'
+ 'main-content'
'player';
grid-template-rows: calc(100vh - 85px) 85px;
grid-template-columns: 1fr;
@@ -36,7 +36,7 @@ const Layout = styled.div`
height: 100%;
`;
-const MainContainer = styled.main<{
+const MainContentContainer = styled.div<{
leftSidebarWidth: string;
rightExpanded?: boolean;
rightSidebarWidth?: string;
@@ -44,7 +44,7 @@ const MainContainer = styled.main<{
}>`
position: relative;
display: ${(props) => (props.shell ? 'flex' : 'grid')};
- grid-area: main;
+ grid-area: main-content;
grid-template-areas: 'sidebar . right-sidebar';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
@@ -53,14 +53,14 @@ const MainContainer = styled.main<{
background: var(--main-bg);
`;
-const SidebarContainer = styled.div`
+const SidebarContainer = styled.aside`
position: relative;
grid-area: sidebar;
background: var(--sidebar-bg);
border-right: var(--sidebar-border);
`;
-const RightSidebarContainer = styled(motion.div)`
+const RightSidebarContainer = styled(motion.aside)`
position: relative;
grid-area: right-sidebar;
height: 100%;
@@ -253,125 +253,126 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
}, [throttledResize, stopResizing]);
return (
- <>
-
-
- {!shell && (
- <>
-
- {
- e.preventDefault();
- startResizing('left');
- }}
- />
-
-
-
- {isQueueDrawerButtonVisible && (
-
-
-
- )}
+
+
+ {!shell && (
+ <>
+
+
+ {isQueueDrawerButtonVisible && (
+
+
+
+ )}
- {drawer && (
- {
- // The drawer will close due to the delay when setting isReorderingQueue
- setTimeout(() => {
- if (useAppStore.getState().isReorderingQueue) return;
- drawerHandler.close();
- }, 50);
- }}
- >
-
-
- )}
-
-
- {showSideQueue && (
- <>
- {sideQueueType === 'sideQueue' ? (
-
- {
- e.preventDefault();
- startResizing('right');
- }}
- />
-
-
- ) : (
- {
- // The drawer will close due to the delay when setting isReorderingQueue
- setTimeout(() => {
- if (useAppStore.getState().isReorderingQueue) return;
- drawerHandler.close();
- }, 50);
+ {drawer && (
+ {
+ // The drawer will close due to the delay when setting isReorderingQueue
+ setTimeout(() => {
+ if (useAppStore.getState().isReorderingQueue) return;
+ drawerHandler.close();
+ }, 50);
+ }}
+ >
+
+
+ )}
+
+
+ {showSideQueue && (
+ <>
+ {sideQueueType === 'sideQueue' ? (
+
- >
- )}
- >}>
-
-
-
-
-
-
-
- >
+ />
+
+
+ ) : (
+ {
+ // The drawer will close due to the delay when setting isReorderingQueue
+ setTimeout(() => {
+ if (useAppStore.getState().isReorderingQueue) return;
+ drawerHandler.close();
+ }, 50);
+ }}
+ >
+
+
+ )}
+ >
+ )}
+
+ >
+ )}
+ >}>
+
+
+
+
+
+
+
);
};