regression: room list not using full sidebar width in new navigation

apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx

@@ -1,13 +1,14 @@
+import type { Box } from '@rocket.chat/fuselage';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import type { HTMLAttributes, ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import { useEffect, useState, useRef, cloneElement, forwardRef, memo } from 'react';
 
 import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars';
 
 type VirtualizedScrollbarsProps = {
 	overflowX?: boolean;
 	children: ReactElement;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'is'>;
+} & Omit<ComponentProps<typeof Box>, 'is'>;
 
 const VirtualizedScrollbars = forwardRef<HTMLElement, VirtualizedScrollbarsProps>(function VirtualizedScrollbars(
 	{ overflowX, ...props },
@@ -36,7 +37,11 @@ const VirtualizedScrollbars = forwardRef<HTMLElement, VirtualizedScrollbarsProps
 		return () => osInstance()?.destroy();
 	}, [initialize, osInstance, ref, scroller]);
 
-	return <BaseScrollbars ref={rootRef}>{cloneElement(props.children, { scrollerRef: setScroller })}</BaseScrollbars>;
+	return (
+		<BaseScrollbars ref={rootRef} {...props}>
+			{cloneElement(props.children, { scrollerRef: setScroller })}
+		</BaseScrollbars>
+	);
 });
 
 export default memo(VirtualizedScrollbars);

apps/meteor/client/sidebarv2/RoomList/RoomList.tsx

@@ -49,7 +49,7 @@ const RoomList = () => {
 
 	return (
 		<Box position='relative' display='flex' overflow='hidden' height='full' flexGrow={1} flexShrink={1} flexBasis='auto' ref={ref}>
-			<VirtualizedScrollbars>
+			<VirtualizedScrollbars width='full'>
 				<GroupedVirtuoso
 					groupCounts={groupsCount}
 					groupContent={(index) => (

apps/meteor/tests/e2e/sidebar.spec.ts

@@ -1,5 +1,6 @@
 import { Users } from './fixtures/userStates';
 import { HomeChannel } from './page-objects';
+import { setSettingValueById } from './utils';
 import { test, expect } from './utils/test';
 
 test.use({ storageState: Users.admin.state });
@@ -32,4 +33,21 @@ test.describe.serial('sidebar', () => {
 		await page.keyboard.press('Tab');
 		await expect(poHomeDiscussion.sidenav.sidebarChannelsList.getByRole('link').first()).not.toBeFocused();
 	});
+
+	test.describe('SidebarV2', () => {
+		test.beforeAll(({ api }) =>
+			Promise.all([setSettingValueById(api, 'Accounts_AllowFeaturePreview', true), setSettingValueById(api, 'newNavigation', true)]),
+		);
+
+		test.afterAll(({ api }) =>
+			Promise.all([setSettingValueById(api, 'Accounts_AllowFeaturePreview', false), setSettingValueById(api, 'newNavigation', false)]),
+		);
+
+		test('should ensure the room list spans the full width of the sidebar', async ({ page }) => {
+			const sidebarV2 = page.getByLabel('sidebar');
+			const sidebarWidth = await sidebarV2.boundingBox();
+			const roomListWidth = await sidebarV2.getByTestId('virtuoso-item-list').boundingBox();
+			expect(roomListWidth?.width).toBeCloseTo(sidebarWidth?.width || -10, 1);
+		});
+	});
 });