.editor-view-container {
    
    position: relative;
    width: 100%;
    height: 100%;

    // the container that directly contains ProseMirror editor
    & > .editor-container {
        position: relative;
    
        height: fit-content;
        width: auto;

        padding-left: 80px;
        padding-right: 80px;
        padding-top: 40px;
        padding-bottom: 100px;

        max-width: 1000px;
        
        /** center */
        margin: auto;
    }

    /**
     * Make the editor-view-container is scrollable, so that the scrollbar is 
     * visualized next to the right edge.
     */

    overflow-y: scroll;
    overflow-x: auto;

    &::-webkit-scrollbar {
        width: 10px;
    }
    
    /* Track */
    &:hover.editor-view-container::-webkit-scrollbar-track {
        background: none;
    }
    
    /* Handle */
    &::-webkit-scrollbar-thumb {
        background: #dfdfdf;
        border-radius: 16px;
    }
    &:hover.editor-view-container::-webkit-scrollbar-thumb {
        background: #bbb;
    }
}