.drawer {
    position: absolute;
    top: $lineheight * 3;
    right: 0;
    -webkit-transform: translateX(103%);
    transform: translateX(103%);
    will-change: transform;
    width: 50%;
    background-color: $pickled-bluewood;
    height: calc(100vh - #{($lineheight * 3)});

    &.visible {
        -webkit-transform: none;
        transform: none;
    }

    &.animatable {
        transition: all 130ms ease-in;
    }

    &.visible.animatable {
        transition: all 330ms ease-out;
    }

    &__container {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    &__heading {
        padding-left: $gutter * 8;
        padding-right: $gutter * 8;
        color: $cadet-blue;
        margin-top: $lineheight * 3;
        margin-bottom: $lineheight * 2;
    }

    &__banner {
        padding: ($lineheight) ($gutter * 8);
        background-color: $grey-chateau;
    }

    &__body {
        padding: ($lineheight) ($gutter * 8);
        background-color: $quill-grey;
        flex: 1;
        display: flex;
    }

    &__loader {
        margin-left: 0;
        margin-right: 0;
    }

    &__footer {
        padding: $lineheight ($gutter * 8);
    }
}
.drawer {
    position: fixed;
    top: $lineheight * 3;
    right: 0;
    -webkit-transform: translateX(103%);
    transform: translateX(103%);
    will-change: transform;
    width: 50%;
    background-color: $pickled-bluewood;
    height: calc(100vh - #{($lineheight * 3)});

    &.visible {
        -webkit-transform: none;
        transform: none;
    }

    &.animatable {
        transition: all 130ms ease-in;
    }

    &.visible.animatable {
        transition: all 330ms ease-out;
    }

    &__container {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    &__heading {
        padding-left: $gutter * 8;
        padding-right: $gutter * 8;
        color: $cadet-blue;
        margin-top: $lineheight * 3;
        margin-bottom: $lineheight * 2;
    }

    &__banner {
        padding: ($lineheight) ($gutter * 8);
        background-color: $grey-chateau;
    }

    &__body {
        padding: ($lineheight) ($gutter * 8);
        background-color: $quill-grey;
        flex: 1;
        display: flex;
    }

    &__loader {
        margin-left: 0;
        margin-right: 0;
    }

    &__footer {
        padding: $lineheight ($gutter * 8);
    }
}
Fix off-canvas screen causing horizontal scrolling
Fix off-canvas screen causing horizontal scrolling


Former-commit-id: 780dce1b13b2b6df2a6c945ebdb5ecc1d5752402
Former-commit-id: 48af98928bf0fd31a0749fc15d87b99644b0e0e1
Former-commit-id: 410a00bf6db185e162ee78610db01dcf9bafc149