chore: keep sidebar opened for tablets (#30090)

apps/meteor/client/providers/LayoutProvider.tsx

@@ -10,7 +10,7 @@ const LayoutProvider: FC = ({ children }) => {
 	const isEmbedded = layout === 'embedded';
 	const breakpoints = useBreakpoints(); // ["xs", "sm", "md", "lg", "xl", xxl"]
 
-	const isMobile = !breakpoints.includes('lg');
+	const isMobile = !breakpoints.includes('md');
 
 	useEffect(() => {
 		setIsCollapsed(isMobile);
@@ -38,6 +38,7 @@ const LayoutProvider: FC = ({ children }) => {
 						// eslint-disable-next-line no-nested-ternary
 						contextualBar: breakpoints.includes('sm') ? (breakpoints.includes('xl') ? '38%' : '380px') : '100%',
 					},
+					roomToolboxExpanded: breakpoints.includes('lg'),
 					contextualBarExpanded: breakpoints.includes('sm'),
 					// eslint-disable-next-line no-nested-ternary
 					contextualBarPosition: breakpoints.includes('sm') ? (breakpoints.includes('lg') ? 'relative' : 'absolute') : 'fixed',

apps/meteor/client/sidebar/SidebarRegion.tsx

@@ -46,12 +46,12 @@ const SidebarRegion = () => {
 			transform: translate3d(0px, 0px, 0px);
 		}
 
-		// 768px to 1599px
+		/* // 768px to 1599px
 		// using em unit base 16
 		@media (max-width: 48em) {
 			width: 80%;
 			min-width: 80%;
-		}
+		} */
 
 		// 1600px to 1919px
 		// using em unit base 16

apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx

@@ -15,16 +15,16 @@ type RoomToolboxProps = {
 
 const RoomToolbox = ({ className }: RoomToolboxProps) => {
 	const t = useTranslation();
-	const { isMobile } = useLayout();
+	const { roomToolboxExpanded } = useLayout();
 
 	const toolbox = useRoomToolbox();
 	const { actions, openTab } = toolbox;
 
 	const featuredActions = actions.filter((action) => action.featured);
 	const normalActions = actions.filter((action) => !action.featured);
-	const visibleActions = isMobile ? [] : normalActions.slice(0, 6);
+	const visibleActions = !roomToolboxExpanded ? [] : normalActions.slice(0, 6);
 	const hiddenActions: Record<string, RoomToolboxActionConfig> = Object.fromEntries(
-		(isMobile ? actions : normalActions.slice(6))
+		(!roomToolboxExpanded ? actions : normalActions.slice(6))
 			.filter((item) => !item.disabled)
 			.map((item) => {
 				return [
@@ -74,10 +74,10 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => {
 			{featuredActions.map(mapToToolboxItem)}
 			{featuredActions.length > 0 && <HeaderToolboxDivider />}
 			{visibleActions.map(mapToToolboxItem)}
-			{(normalActions.length > 6 || isMobile) && (
+			{(normalActions.length > 6 || !roomToolboxExpanded) && (
 				<Menu
 					data-qa-id='ToolBox-Menu'
-					tiny={!isMobile}
+					tiny={roomToolboxExpanded}
 					title={t('Options')}
 					maxHeight='initial'
 					className={className}

packages/ui-contexts/src/LayoutContext.ts

@@ -9,6 +9,7 @@ export type LayoutContextValue = {
 	isEmbedded: boolean;
 	showTopNavbarEmbeddedLayout: boolean;
 	isMobile: boolean;
+	roomToolboxExpanded: boolean;
 	sidebar: {
 		isCollapsed: boolean;
 		toggle: () => void;
@@ -25,6 +26,7 @@ export const LayoutContext = createContext<LayoutContextValue>({
 	isEmbedded: false,
 	showTopNavbarEmbeddedLayout: false,
 	isMobile: false,
+	roomToolboxExpanded: true,
 	sidebar: {
 		isCollapsed: false,
 		toggle: () => undefined,