CyberChef/src/web/stylesheets/layout/_structure.css

/**
 * Overall page structure styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

body {
    overflow: hidden;
}

#banner,
#content-wrapper {
    position: absolute;
    width: 100%;
}

#workspace-wrapper {
    height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) );
    margin-top: var(--banner-height);
}

#banner {
    top: 0;
    margin: 0;
    height: var(--banner-height);
}

#content-wrapper {
    top: 0;
    bottom: 0;
}

#recipe { height: 20vh;}
#IO { height: 50vh; }

#controls {
    bottom: 0;
    height: var(--controls-height);
}

@media only screen and ( min-width: 768px ) {
    #workspace-wrapper {
        height: calc( 100vh - var(--banner-height));
    }

    #categories,
    #search-results {
        max-height: max-content;
        overflow: revert;
    }

    #operations, #recipe, #IO {
        height: 100%;
    }

    #operations {
        overflow: auto;
    }

    #controls {
        position: absolute;
    }
}