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

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

:root {
    --banner-height: 40px;
    --controls-height: 70px;
    --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
    --recipe-height: 16vh;
    --operations-height: 89px;
    --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
}

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

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

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

#banner { height: var(--banner-height); }
#operations { height: var(--operations-height); }
#recipe { height: var(--recipe-height); }
#IO { height: var(--io-height); }
#controls { height: var(--controls-height); }

#controls {
    bottom: 0;
}

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

@media only screen and ( min-width: 768px ) {
    #IO {
        padding-bottom: 0;
    }

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

    #recipe .list-area  {
        bottom: var(--controls-height);
    }

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

    #operations-dropdown {
        max-height: max-content;
        overflow: revert;
    }

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

    #operations {
        overflow: auto;
    }

    #controls {
        position: absolute;
    }
}