diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index e080f0efb4..0e76152f86 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -70,7 +70,6 @@ limitations under the License. z-index: 1; // over top of other elements, but still under the ones in the visible list height: 32px; // to match the header container // width set by JS - width: calc(100% - 22px); } &.mx_RoomSublist2_headerContainer_stickyBottom { diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx index 44116c0efd..6c790f3318 100644 --- a/src/components/structures/LeftPanel2.tsx +++ b/src/components/structures/LeftPanel2.tsx @@ -125,11 +125,13 @@ export default class LeftPanel2 extends React.Component { if (slRect.top + headerHeight > bottom && !gotBottom) { header.classList.add("mx_RoomSublist2_headerContainer_sticky"); header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom"); + header.style.width = `${headerStickyWidth}px`; header.style.removeProperty("top"); gotBottom = true; } else if ((slRect.top - (headerHeight / 3)) < top) { header.classList.add("mx_RoomSublist2_headerContainer_sticky"); header.classList.add("mx_RoomSublist2_headerContainer_stickyTop"); + header.style.width = `${headerStickyWidth}px`; header.style.top = `${rlRect.top}px`; if (lastTopHeader) { lastTopHeader.style.display = "none"; @@ -141,6 +143,7 @@ export default class LeftPanel2 extends React.Component { header.classList.remove("mx_RoomSublist2_headerContainer_sticky"); header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop"); header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom"); + header.style.removeProperty("width"); header.style.removeProperty("top"); } }