@import '~assets/styles/tables.scss';

.title-line {
    margin: 20px 25px;
}

table {
    .mat-header-cell,
    .mat-cell {
        min-width: 200px;
        position: relative;
    }

    .clickable-cell {
        display: flex;
        cursor: pointer;
        &:hover {
            background-color: rgba(0, 0, 0, 0.025);
        }
    }

    .inner-table {
        text-align: center;
        align-items: center;
        margin: auto;
        overflow: hidden;
        padding: 0 10px;
    }

    .mat-column-perm {
        min-width: 150px;
        .permission-name {
            margin-right: 10px;
        }
    }
}

.mat-chip:hover {
    cursor: pointer;
}

.scrollable-matrix {
    overflow: auto;
}

@import '~assets/styles/tables.scss';

.title-line {
    margin: 20px 25px;
}

table {
    .mat-header-cell,
    .mat-cell {
        min-width: 200px;
        position: relative;
    }

    .clickable-cell {
        display: flex;
        cursor: pointer;
        &:hover {
            background-color: rgba(0, 0, 0, 0.025);
        }
    }

    .inner-table {
        text-align: center;
        align-items: center;
        margin: auto;
        overflow: hidden;
        padding: 0 10px;
    }

    .mat-column-perm {
        min-width: 150px;
        .permission-name {
            margin-right: 10px;
        }
    }
}

.mat-chip:hover {
    cursor: pointer;
}

.scrollable-matrix {
    overflow-y: scroll;
    overflow-x: auto;
    // the most simple solution that requires every other size to be exact.
    // TODO: if the whole page is absolute again, this will not be required anymore.
    height: calc(100vh - 128px);
}

Enhance workflow matrix for small screens
Enhance workflow matrix for small screens

makes scrolling horizontally in the workflow manager easier.
The offline banner and the voting banner will lead to unwanted results.
