WIP - Fix Secondary Panes Scroll Bar (firefox-devtools#4275)

khal0988 · Oct 13, 2017 · 79a7cde · 79a7cde
1 parent a349480
commit 79a7cde
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/SecondaryPanes/CommandBar.css b/src/components/SecondaryPanes/CommandBar.css
@@ -3,7 +3,6 @@
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   overflow: hidden;
-  position: sticky;
   z-index: 1;
   background-color: var(--theme-toolbar-background);
 }

diff --git a/src/components/SecondaryPanes/SecondaryPanes.css b/src/components/SecondaryPanes/SecondaryPanes.css
@@ -1,4 +1,5 @@
 .secondary-panes {
+  overflow: scroll;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -13,8 +14,12 @@
   the wrapper.
   Ref: https://github.com/devtools-html/debugger.html/issues/3426
 */
-.secondary-panes--sticky-commandbar {
-  overflow-y: scroll;
+
+.secondary-panes-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .secondary-panes .accordion {

diff --git a/src/components/SecondaryPanes/index.js b/src/components/SecondaryPanes/index.js
@@ -232,11 +232,13 @@ class SecondaryPanes extends Component {
 
   render() {
     return (
-      <div className="secondary-panes secondary-panes--sticky-commandbar">
+      <div className="secondary-panes-wrapper">
         <CommandBar horizontal={this.props.horizontal} />
-        {this.props.horizontal
-          ? this.renderHorizontalLayout()
-          : this.renderVerticalLayout()}
+        <div className="secondary-panes">
+          {this.props.horizontal
+            ? this.renderHorizontalLayout()
+            : this.renderVerticalLayout()}
+        </div>
         {this.renderUtilsBar()}
       </div>
     );