Custom.css

/* "Elements" panel optimized for vertical layout */
/* left column (DOM) */
#-webkit-web-inspector.dock-to-right:not(.detached) .elements .source-code {
    left: auto;
    right: auto;
    width: 100% !important;
    height: 70%;
    border-bottom: 3px solid #eee;
}

/* right column (CSS) */
#-webkit-web-inspector.dock-to-right:not(.detached) .elements .split-view-sidebar-right {
    left: auto;
    right: auto;
    width: 100% !important;
    height: 30%;
    border-top: 1px solid #ccc;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .elements .split-view-contents {
    position: relative !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .elements .split-view-resizer {
    display: none;
}

/* "Scripts" panel optimized for vertical layout:
 * In the default layout, the panel has 3 columns A, B, C, organized as follows:
 * ,-----------.
 * \___________\___
 * |   |       |   |
 * | A |   B   | C |
 * |___|_______|___|
 * `-----------'
 *
 * The dotted border indicates the DOM hierarchy:
 *
 * <div>
 *   <div>
 *     <!-- column A -->
 *     <!-- column B -->
 *   </div>
 *   <!-- column C -->
 * </div>
 *
 * We need to reorganize them so that B appears on top, and A and C share the bottom half:
 *  _______
 * |       |
 * |       |
 * |   B   |
 * |       |
 * |_______|
 * |   |   |
 * | A | C |
 * |___|___|
 */

/* wrapper containing A and B: (A B) */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child {
    width: 100%;
}

/* column A (when pinned) */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .split-view-sidebar-left {
    left: 0px;
    top: 70% !important;
    width: 50% !important;
    z-index: 10;
    background-color: white;
}

/* column A (when overlayed, i.e., when NOT pinned) */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .sidebar-overlay {
    top: 70% !important;
}

/* get rid of split view resizer between columns A and B */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .split-view-resizer {
    display: none;
}

/* column B */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .split-view-contents:nth-child(2) {
    left: 0px !important;
    height: 70%;
    position: static !important; /* needed for correctly positioning column A's show / hide button later on */
    border-bottom: 1px solid #888;
}

/* column C */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-sidebar-right {
    right: 0px;
    top: 70% !important;
    width: 50% !important;
    background-color: white;
}

/* reposition the buttons for showing / hiding / resizing the sidebars */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view .scripts-debugger-show-hide-button,
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view .scripts-navigator-show-hide-button,
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-debug-sidebar-resizer-widget {
    top: 70% !important;
    z-index: 20 !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-editor-container-tabbed-pane > .scripts-navigator-show-hide-button {
    left: auto !important;
    right: 50% !important;
    margin-right: 20px !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view .sidebar-overlay .navigator-tabbed-pane .scripts-navigator-show-hide-button {
    top: 0 !important;
}



/*
 * Network panel
 */
#-webkit-web-inspector.dock-to-right:not(.detached) .network .split-view-sidebar-left {
    position: static;
    width: 100% !important;
    height: 50% !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .network .split-view-sidebar-left.maximized {
    height: 100% !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #network-views {
    position: static;
    left: 0 !important;
    top: 50% !important;
    width: 100%;
    height: 50% !important;
}


/* "Resources", "Audits", and "Profiles" panels optimized for vertical layout */
#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left,
#-webkit-web-inspector.dock-to-right:not(.detached) .audits .split-view-sidebar-left,
#-webkit-web-inspector.dock-to-right:not(.detached) .profiles .split-view-sidebar-left {
    height: 30% !important;
    width: 100% !important;
    border-bottom: 3px solid #eee;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-contents:nth-child(2),
#-webkit-web-inspector.dock-to-right:not(.detached) .audits .split-view-contents:nth-child(2),
#-webkit-web-inspector.dock-to-right:not(.detached) .profiles .split-view-contents:nth-child(2) {
    top: 30% !important;
    left: 0 !important;
    border-top: 1px solid #ccc;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-resizer,
#-webkit-web-inspector.dock-to-right:not(.detached) .audits .split-view-resizer,
#-webkit-web-inspector.dock-to-right:not(.detached) .profiles .split-view-resizer {
    display: none;
}

/* Dynamically-expanding split view in the Resources panel
 * Idea credits: https://github.com/mauricelam/DockToRight/blob/c9e9425d50ddfe625831a34a3ea63d15d10b62b3/Custom.css#L244-L260 */
#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left {
    height: 30% !important;
    z-index: 20;
    -webkit-transition: 0.2s;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left:hover {
    height: 50% !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left + .split-view-contents {
    top: 20% !important;
    -webkit-transition: 0.2s;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left:hover + .split-view-contents {
    top: 50% !important;
}