diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss
index 0b8558a61e..70dbbe8d07 100644
--- a/res/css/structures/_AutoHideScrollbar.scss
+++ b/res/css/structures/_AutoHideScrollbar.scss
@@ -18,6 +18,7 @@ limitations under the License.
 1. for browsers that support native overlay auto-hiding scrollbars
 */
 .mx_AutoHideScrollbar {
+    overflow-x: hidden;
     overflow-y: auto;
     -ms-overflow-style: -ms-autohiding-scrollbar;
 }
@@ -34,23 +35,20 @@ body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
 }
 /*
 3. as a last fallback, compensate for the scrollbar taking up space in the layout
-by playing with the paddings. the default below will add a right padding
-of the scrollbar width and clear that on hover.
-this won't work well on classes that also need to set their padding,
-so this needs to be overriden and adjust the padding with calc like so:
-```
-body.mx_scrollbar_nooverlay .componentClass.mx_AutoHideScrollbar_overflow:hover {
-    padding-right: calc(15px - var(--scrollbar-width)) !important;
-}
-```
+by having giving the child element (.mx_AutoHideScrollbar_offset) a
+negative right margin of the width of the scrollbar when the container
+is overflowing. This is what Firefox ends up using. Overflow is detected
+in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
+This only works in Firefox, which should be fine as this fallback is only needed there.
 */
 body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar {
-    box-sizing: border-box;
     overflow-y: hidden;
-    padding-right: var(--scrollbar-width);
 }
 
 body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover {
     overflow-y: auto;
-    padding-right: 0;
+}
+
+body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset {
+    margin-right: calc(-1 * var(--scrollbar-width));
 }
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 2b83e4ee03..1a92a792d6 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -118,22 +118,13 @@ limitations under the License.
 .mx_RoomSubList_scroll {
     /* let rooms list grab all available space */
     flex: 0 1 auto;
-    padding: 0 15px !important;
-    overflow-x: hidden;
-}
-/*
-for browsers that don't support overlay scrollbars,
-subtract scrollbar width from right padding on hover when overflowing
-so the content doesn't jump when showing the scrollbars
-*/
-body.mx_scrollbar_nooverlay .mx_RoomSubList_scroll.mx_AutoHideScrollbar_overflow:hover {
-    padding-right: calc(15px - var(--scrollbar-width)) !important;
+    padding: 0 8px;
 }
 
 .collapsed {
 
     .mx_RoomSubList_scroll {
-        padding: 0px !important;
+        padding: 0;
     }
     .mx_RoomSubList_label {
         height: 17px;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index f13e0ea2fd..1ea62b8ca8 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -36,7 +36,7 @@ limitations under the License.
 }
 
 // toggle menuButton and badge on hover/menu displayed
-.mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
+.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
     .mx_RoomTile_menuButton {
         display: block;
     }
diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js
index 507af2c5f0..a462b2bf14 100644
--- a/src/components/structures/AutoHideScrollbar.js
+++ b/src/components/structures/AutoHideScrollbar.js
@@ -112,7 +112,9 @@ export default class AutoHideScrollbar extends React.Component {
                     ref={this._collectContainerRef}
                     className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
                 >
-            { this.props.children }
+            <div className="mx_AutoHideScrollbar_offset">
+                { this.props.children }
+            </div>
         </div>);
     }
 }