<commit_before>@import '~assets/styles/variables.scss';

.los-title {
    margin-left: 25px;
}

.finished-list {
    box-shadow: none !important;
    margin-bottom: 15px;

    .mat-list-item {
        height: auto;
        margin-bottom: 10px;
    }

    .finished-speaker-grid {
        display: grid;
        width: 100%;
        grid-gap: 5px;

        grid-template-areas:
            'number name controls'
            'number time controls';
        grid-template-columns: 30px 1fr min-content;
    }

    @include desktop {
        .finished-speaker-grid {
            grid-template-areas: 'number name point-of-order time controls';
            grid-template-columns: 30px 1fr min-content min-content;
        }
    }

    .number {
        grid-area: number;
        margin: 0;
    }

    .name {
        grid-area: name;
        margin: 0;
    }

    .point-of-order {
        grid-area: point-of-order;
        margin: 0;
        //allows pushing this grid area as small as possible and aligns the end to the same level
        white-space: nowrap;
        font-size: 80%;

        .mat-icon {
            line-height: 19px;
        }
    }

    .time {
        grid-area: time;
        margin: 0;
        //allows pushing this grid area as small as possible and aligns the end to the same level
        white-space: nowrap;
        font-size: 80%;
    }

    .controls {
        grid-area: controls;
        margin: 0;
        opacity: 0.7;

        .mat-icon-button {
            height: 20px;
            line-height: 1;

            .mat-icon {
                line-height: 19px;
            }
        }
    }
}

.current-speaker {
    display: table;
    width: -webkit-fill-available;
    height: 50px;
    margin: 50px 25px 20px 25px;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);

    .prefix {
        display: table-cell;
        padding: 0 15px;
        vertical-align: middle;
        .mat-icon {
            vertical-align: middle;
        }
    }

    .name {
        display: table-cell;
        vertical-align: middle;
        font-weight: bold;
        padding-left: 10px;
        width: 100%;
    }

    .suffix {
        display: table-cell;
        vertical-align: middle;
        white-space: nowrap;
        padding-right: 10px;
    }
}

.waiting-list {
    padding: 10px 25px 0 25px;
}

.search-new-speaker-form {
    padding: 15px 25px 0 25px;
    width: auto;

    .search-users-field {
        width: 100%;
        .search-users {
            display: grid;
            .mat-form-field {
                width: 100%;
            }
        }
    }
}

.add-self-buttons {
    margin: 15px 25px;
    display: flex;

    button + button {
        margin-left: 20px;
    }
}

.speaker-warning {
    margin-right: 5px;
}<commit_msg>Responsive add-self buttons in list-of-speakers<commit_after>@import '~assets/styles/variables.scss';

.los-title {
    margin-left: 25px;
}

.finished-list {
    box-shadow: none !important;
    margin-bottom: 15px;

    .mat-list-item {
        height: auto;
        margin-bottom: 10px;
    }

    .finished-speaker-grid {
        display: grid;
        width: 100%;
        grid-gap: 5px;

        grid-template-areas:
            'number name controls'
            'number time controls';
        grid-template-columns: 30px 1fr min-content;
    }

    @include desktop {
        .finished-speaker-grid {
            grid-template-areas: 'number name point-of-order time controls';
            grid-template-columns: 30px 1fr min-content min-content;
        }
    }

    .number {
        grid-area: number;
        margin: 0;
    }

    .name {
        grid-area: name;
        margin: 0;
    }

    .point-of-order {
        grid-area: point-of-order;
        margin: 0;
        //allows pushing this grid area as small as possible and aligns the end to the same level
        white-space: nowrap;
        font-size: 80%;

        .mat-icon {
            line-height: 19px;
        }
    }

    .time {
        grid-area: time;
        margin: 0;
        //allows pushing this grid area as small as possible and aligns the end to the same level
        white-space: nowrap;
        font-size: 80%;
    }

    .controls {
        grid-area: controls;
        margin: 0;
        opacity: 0.7;

        .mat-icon-button {
            height: 20px;
            line-height: 1;

            .mat-icon {
                line-height: 19px;
            }
        }
    }
}

.current-speaker {
    display: table;
    width: -webkit-fill-available;
    height: 50px;
    margin: 50px 25px 20px 25px;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);

    .prefix {
        display: table-cell;
        padding: 0 15px;
        vertical-align: middle;
        .mat-icon {
            vertical-align: middle;
        }
    }

    .name {
        display: table-cell;
        vertical-align: middle;
        font-weight: bold;
        padding-left: 10px;
        width: 100%;
    }

    .suffix {
        display: table-cell;
        vertical-align: middle;
        white-space: nowrap;
        padding-right: 10px;
    }
}

.waiting-list {
    padding: 10px 25px 0 25px;
}

.search-new-speaker-form {
    padding: 15px 25px 0 25px;
    width: auto;

    .search-users-field {
        width: 100%;
        .search-users {
            display: grid;
            .mat-form-field {
                width: 100%;
            }
        }
    }
}

.add-self-buttons {
    margin: 10px 20px;
    display: inline-flex;
    flex-wrap: wrap;

    button {
        margin: 5px;
    }
}

.speaker-warning {
    margin-right: 5px;
}
{'fraction_non_alphanumeric': 0.11218464841653247, 'fraction_numerical': 0.03274288781535158, 'mean_word_length': 1.4442501093135112, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '539304', 'n_tokens_mistral': 1999, 'n_tokens_neox': 1770, 'n_words': 437}