fix sidebar width

rocketchat.css

@@ -1,8 +1,6 @@
 :root {
-	--sidebar-width: 400px;
 	--sidebar-folders-width: 85px;
 
-
 	--bg-image-1: url(https://blog.1a23.com/wp-content/uploads/sites/2/2020/02/pattern_03-150x150.png);
 	--bg-image-2: url(https://w0.peakpx.com/wallpaper/154/372/HD-wallpaper-telegram-background-whatsapp-creative-android-pattern-texture-abstract.jpg);
 	--bg-image-3: url(https://w0.peakpx.com/wallpaper/816/695/HD-wallpaper-whatsapp-cartoons-background-blue-cartoons-green-pink-purple-walpaper-whatsapp.jpg);
@@ -184,14 +182,6 @@ html[data-palette-dark="palette-darker"] {
 
 }
 
-/*
-html[data-theme="telegram"]
-html[data-bg="bg-1"]
-html[data-palette-light="palette-2"]
-html[data-palette-dark="palette-2"]
-*/
-
-
 
 
 /*
@@ -901,7 +891,7 @@ span.rcx-message__emoji.emoji.rcx-message__emoji--big[style*="background-image"]
 /* sidebar main container */
 div#sidebar-region {
 		max-width: 400px !important;
-		flex: 0 0 var(--sidebar-width) !important;
+		/* flex: 0 0 var(--sidebar-width) !important; */
 }
 
 /* sidebar > items padding's */
@@ -1715,7 +1705,6 @@ html[data-theme="flat"] ul.thread {
 	display: flex;
 	flex-direction: column;
 	align-content: stretch;
-	/* flex-wrap: wrap; */
 	flex-wrap: nowrap;
 	align-items: stretch;
 	justify-content: flex-start;

rocketchat.js

@@ -708,13 +708,17 @@ async function setupNavbar(navbarItemsContainer) {
 	navbarItemsContainer.setAttribute("folder-label-area", allChatsLabel);
 
 	const sidebarWidth = getComputedStyle(root).getPropertyValue("--sidebar-width");
+	const sidebarWidthMd = getComputedStyle(root).getPropertyValue("--sidebar-md-width");
+	const sidebarWidthLg = getComputedStyle(root).getPropertyValue("--sidebar-lg-width");
 	const sidebarFoldersWidth = getComputedStyle(root).getPropertyValue("--sidebar-folders-width");
 
 	// set sidebar width
 	const newSidebarWidth = `calc(${sidebarWidth} + ${sidebarFoldersWidth})`;
-	if (sidebarWidth != newSidebarWidth) {
-		root.style.setProperty("--sidebar-width", newSidebarWidth);
-	}
+	const newSidebarWidthMd = `calc(${sidebarWidthMd} + ${sidebarFoldersWidth})`;
+	const newSidebarWidthLg = `calc(${sidebarWidthLg} + ${sidebarFoldersWidth})`;
+	root.style.setProperty("--sidebar-width", newSidebarWidth);
+	root.style.setProperty("--sidebar-md-width", newSidebarWidthMd);
+	root.style.setProperty("--sidebar-lg-width", newSidebarWidthLg);
 
 	// setup folders sidebar container
 	const chatsContainer = document.querySelector('nav.rcx-sidebar div[aria-label][role="region"]');