diff --git a/src/public/javascripts/widgets/layout.js b/src/public/javascripts/widgets/layout.js
index b3793cfc4..012791fda 100644
--- a/src/public/javascripts/widgets/layout.js
+++ b/src/public/javascripts/widgets/layout.js
@@ -35,7 +35,7 @@ export default class Layout {
                 new TitleBarButtonsWidget(appContext)
             ]),
             new StandardTopWidget(appContext),
-            new FlexContainer(appContext, { 'flex-direction': 'row' }, [
+            new FlexContainer(appContext, { 'flex-direction': 'row', 'overflow': 'hidden' }, [
                 new SidePaneContainer(appContext, 'left', [
                     new GlobalButtonsWidget(appContext),
                     new SearchBoxWidget(appContext),
diff --git a/src/public/javascripts/widgets/side_pane_container.js b/src/public/javascripts/widgets/side_pane_container.js
index da80cef02..5bb090804 100644
--- a/src/public/javascripts/widgets/side_pane_container.js
+++ b/src/public/javascripts/widgets/side_pane_container.js
@@ -1,24 +1,14 @@
-import BasicWidget from "./basic_widget.js";
 import options from "../services/options.js";
+import FlexContainer from "./flex_container.js";
 
-export default class SidePaneContainer extends BasicWidget {
+export default class SidePaneContainer extends FlexContainer {
     constructor(appContext, side, widgets) {
-        super(appContext);
+        super(appContext, {id: side + '-pane', 'flex-direction': 'column', 'height': '100%'}, widgets);
 
         this.side = side;
         this.children = widgets;
     }
 
-    render() {
-        this.$widget = $(`<div id="${this.side}-pane" style="display: flex; flex-direction: column;">`);
-
-        for (const widget of this.children) {
-            this.$widget.append(widget.render());
-        }
-
-        return this.$widget;
-    }
-
     eventReceived(name, data, sync = false) {
         if (options.is(this.side + 'PaneVisible')) {
             super.eventReceived(name, data, sync);
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index 8fc5eede3..141011ad3 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -45,12 +45,6 @@ body {
     width: 100%;
 }
 
-#left-pane {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
 .dropdown-menu {
     font-size: inherit;
 }
@@ -146,14 +140,6 @@ body {
     border-color: var(--button-border-color);
 }
 
-#right-pane {
-    overflow: auto;
-    padding-top: 4px;
-    padding-left: 7px;
-    font-size: 90%;
-    height: 100%;
-}
-
 #right-pane .card {
     border: 0;
 }
diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css
index eea054372..fa4d15aa6 100644
--- a/src/public/stylesheets/mobile.css
+++ b/src/public/stylesheets/mobile.css
@@ -9,12 +9,6 @@ html, body {
     height: 100%;
 }
 
-#left-pane {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
 #global-buttons {
     display: flex;
     flex-shrink: 0;