feat: make BoardContainer leftOffset and topOffset customizable

Refs: SHELL-281 (#601)

Author: nubsthead

src/shell/boards/board-container.test.tsx

@@ -11,7 +11,12 @@ import { reduce, sample, size } from 'lodash';
 import 'jest-styled-components';
 
 import { BOARD_DEFAULT_POSITION, BoardContainer } from './board-container';
-import { BOARD_MIN_VISIBILITY, LOCAL_STORAGE_BOARD_SIZE } from '../../constants';
+import {
+	BOARD_MIN_VISIBILITY,
+	HEADER_BAR_HEIGHT,
+	LOCAL_STORAGE_BOARD_SIZE,
+	PRIMARY_BAR_WIDTH
+} from '../../constants';
 import { useAppStore } from '../../store/app';
 import { reopenBoards, useBoardStore } from '../../store/boards';
 import { ICONS, TESTID_SELECTORS } from '../../tests/constants';
@@ -119,6 +124,28 @@ describe('Board container', () => {
 		});
 	});
 
+	describe('board container offsets', () => {
+		test('has default values for topOffset and leftOffset ', () => {
+			setup(<BoardContainer />);
+			const boardContainer = screen.getByTestId(TESTID_SELECTORS.boardContainerComp);
+
+			expect(boardContainer).toHaveStyleRule('height', `calc(100vh - ${HEADER_BAR_HEIGHT})`);
+			expect(boardContainer).toHaveStyleRule('width', `calc(100vw - ${PRIMARY_BAR_WIDTH})`);
+			expect(boardContainer).toHaveStyleRule('top', HEADER_BAR_HEIGHT);
+			expect(boardContainer).toHaveStyleRule('left', PRIMARY_BAR_WIDTH);
+		});
+		test('has customizable values for topOffset and leftOffset ', () => {
+			const leftOffset = '3rem';
+			const topOffset = '2rem';
+			setup(<BoardContainer leftOffset={leftOffset} topOffset={topOffset} />);
+			const boardContainer = screen.getByTestId(TESTID_SELECTORS.boardContainerComp);
+
+			expect(boardContainer).toHaveStyleRule('height', `calc(100vh - ${topOffset})`);
+			expect(boardContainer).toHaveStyleRule('width', `calc(100vw - ${leftOffset})`);
+			expect(boardContainer).toHaveStyleRule('top', topOffset);
+			expect(boardContainer).toHaveStyleRule('left', leftOffset);
+		});
+	});
 	describe('Resize a board', () => {
 		describe('within the resizable area of the document', () => {
 			describe.each([-10, 0, 10])('with offset %d', (offset) => {

src/shell/boards/board-container.tsx

@@ -56,12 +56,17 @@ export const BOARD_DEFAULT_POSITION: Pick<CSSProperties, 'top' | 'left' | 'right
 	bottom: '0'
 };
 
-const BoardContainerComp = styled.div<{ $expanded: boolean; $minimized: boolean }>`
+const BoardContainerComp = styled.div<{
+	$expanded: boolean;
+	$minimized: boolean;
+	$topOffset: string;
+	$leftOffset: string;
+}>`
 	position: fixed;
-	width: calc(100vw - ${PRIMARY_BAR_WIDTH});
-	height: calc(100vh - ${HEADER_BAR_HEIGHT});
-	top: ${HEADER_BAR_HEIGHT};
-	left: ${PRIMARY_BAR_WIDTH};
+	width: ${({ $leftOffset }): string => `calc(100vw - ${$leftOffset})`};
+	height: ${({ $topOffset }): string => `calc(100vh - ${$topOffset})`};
+	top: ${({ $topOffset }): string => $topOffset};
+	left: ${({ $leftOffset }): string => $leftOffset};
 	background-color: rgba(0, 0, 0, 0);
 	pointer-events: none;
 	z-index: ${BOARD_CONTAINER_ZINDEX};
@@ -191,8 +196,12 @@ function calcPositionToRemainVisible(
 }
 
 export const BoardContainer = ({
+	topOffset = HEADER_BAR_HEIGHT,
+	leftOffset = PRIMARY_BAR_WIDTH,
 	minimizeAllowed = true
 }: {
+	topOffset?: string;
+	leftOffset?: string;
 	minimizeAllowed?: boolean;
 }): React.JSX.Element | null => {
 	const t = getT();
@@ -351,7 +360,14 @@ export const BoardContainer = ({
 
 	return (
 		(!isBoardEmpty && current && (
-			<BoardContainerComp $expanded={expanded} $minimized={minimized} ref={boardContainerRef}>
+			<BoardContainerComp
+				$expanded={expanded}
+				$minimized={minimized}
+				$topOffset={topOffset}
+				$leftOffset={leftOffset}
+				ref={boardContainerRef}
+				data-testid="BoardContainerComp"
+			>
 				<Board
 					data-testid="NewItemContainer"
 					background={'gray6'}

src/shell/shell-view.test.tsx

@@ -11,7 +11,7 @@ import 'jest-styled-components';
 import { BOARD_DEFAULT_POSITION } from './boards/board-container';
 import type { Border } from './hooks/useResize';
 import ShellView from './shell-view';
-import { LOCAL_STORAGE_BOARD_SIZE } from '../constants';
+import { HEADER_BAR_HEIGHT, LOCAL_STORAGE_BOARD_SIZE, PRIMARY_BAR_WIDTH } from '../constants';
 import * as constants from '../constants';
 import { ICONS, TESTID_SELECTORS } from '../tests/constants';
 import { mockedApps, setupAppStore } from '../tests/test-app-utils';
@@ -51,6 +51,33 @@ beforeEach(() => {
 });
 
 describe('Shell view', () => {
+	describe('BoardContainerComp', () => {
+		test('will have 0 offsets in focus mode', () => {
+			jest.mocked(constants).IS_FOCUS_MODE = true;
+
+			setup(<ShellView />);
+
+			const boardContainer = screen.getByTestId(TESTID_SELECTORS.boardContainerComp);
+
+			expect(boardContainer).toHaveStyleRule('height', 'calc(100vh - 0rem)');
+			expect(boardContainer).toHaveStyleRule('width', 'calc(100vw - 0rem)');
+			expect(boardContainer).toHaveStyleRule('top', '0rem');
+			expect(boardContainer).toHaveStyleRule('left', '0rem');
+		});
+		test('will have offsets if not in focus mode', () => {
+			jest.mocked(constants).IS_FOCUS_MODE = false;
+
+			setup(<ShellView />);
+
+			const boardContainer = screen.getByTestId(TESTID_SELECTORS.boardContainerComp);
+
+			expect(boardContainer).toHaveStyleRule('height', `calc(100vh - ${HEADER_BAR_HEIGHT})`);
+			expect(boardContainer).toHaveStyleRule('width', `calc(100vw - ${PRIMARY_BAR_WIDTH})`);
+			expect(boardContainer).toHaveStyleRule('top', HEADER_BAR_HEIGHT);
+			expect(boardContainer).toHaveStyleRule('left', PRIMARY_BAR_WIDTH);
+		});
+	});
+
 	test('When resizing under mobile breakpoint, board does not disappear', () => {
 		setup(<ShellView />);
 

src/shell/shell-view.tsx

@@ -16,7 +16,7 @@ import ShellHeader from './shell-header';
 import ShellPrimaryBar from './shell-primary-bar';
 import ShellSecondaryBar from './shell-secondary-bar';
 import { ThemeCallbacksContext } from '../boot/theme-provider';
-import { IS_FOCUS_MODE } from '../constants';
+import { HEADER_BAR_HEIGHT, IS_FOCUS_MODE, PRIMARY_BAR_WIDTH } from '../constants';
 import { useDarkReaderResultValue } from '../dark-mode/use-dark-reader-result-value';
 import { ShellUtilityBar } from '../utility-bar/bar';
 import { ShellUtilityPanel } from '../utility-bar/panel';
@@ -69,7 +69,11 @@ const ShellComponent = (): React.JSX.Element => (
 			<AppViewContainer />
 			<ShellUtilityPanel />
 		</Row>
-		<BoardContainer minimizeAllowed={!IS_FOCUS_MODE} />
+		<BoardContainer
+			leftOffset={IS_FOCUS_MODE ? '0rem' : PRIMARY_BAR_WIDTH}
+			topOffset={IS_FOCUS_MODE ? '0rem' : HEADER_BAR_HEIGHT}
+			minimizeAllowed={!IS_FOCUS_MODE}
+		/>
 	</Background>
 );
 

src/tests/constants.ts

@@ -143,6 +143,7 @@ export const ICONS = {
 };
 
 export const TESTID_SELECTORS = {
+	boardContainerComp: 'BoardContainerComp',
 	board: 'NewItemContainer',
 	boardHeader: 'BoardHeader',
 	checkbox: 'checkbox',