@import 'src/_variables.scss'; .settings-modal { overflow: hidden; &.peek { .modal-panel { /* Explanation: * Modal is positioned vertically centered. * 100vh - 100% = Distance between modal's top+bottom boundaries and screen * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen * + 100% - we move modal completely off-screen, it's top boundary touches * bottom of the screen * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible */ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); } } }