<commit_before>@import "../../bloomUI.less";
@import "../../bloomModalDialog.less";
@import "../../node_modules/react-table/react-table.css";

@fieldVerticalPadding: 0;
@fontSize: 10pt;

.bookMetadataDialog {
    font-family: @ui-fonts;
    font-size: @fontSize;
    // for some reason that one gets overruled by the browser, so:
    textarea {
        font-family: @ui-fonts;
        font-size: @fontSize;
        padding: 5px 5px;
    }
    .dialogContent {
        .ReactTable {
            border: none;
            a.whatsthis {
                text-align: right;
                text-decoration: none;
                font-size: 9px;
                &:focus {
                    outline: 0;
                }
                &:hover {
                    text-decoration: underline;
                }
            }
            .rt-tr-group {
                border-bottom: none;
                margin-bottom: 10px;
            }
            .rt-td {
                border-right: none;
            }
            width: 500px;
            .rt-thead.-header {
                display: none;
            }
            .rt-td.label {
                padding-top: @fieldVerticalPadding;
                padding-bottom: @fieldVerticalPadding;
                text-align: right;
                margin-right: 10px;
            }
            .rt-td.value {
                // Enhance in the future: if this dialog actually gets used much, someone somewhere
                // will need it to be a different font in order to show the title or the author's name.
                // I (JH) am consciously choosing to not put the effort right now into building an API
                // endpoint for that and then calling and setting it in the tsx file.
                // Changed my mind on this... looks really ugly. Let's see how we do with just the system's font.
                // font-family: "Andika New Basic";

                // Some cells, we want grey (readonly), some are white (editable).
                // Since we don't have a way of putting a class on the rt-dt that
                // is the container of the cell, if it has padding, then both kinds
                // of cells will have the same background color surrounding the text or textarea.
                // So we take out the padding of the cell and leave it to the contents to add back
                // that space as padding.
                padding: 0;

                & > textarea {
                    height: 2em;
                    width: 100%;
                    border: none;
                    resize: none;
                    padding-top: @fieldVerticalPadding;
                    padding-bottom: @fieldVerticalPadding;
                }
            }
            // cover art
            img {
                height: 70px;
            }
            .loading {
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 2em;
            }

            .a11y-level-chooser {
                padding: 0 !important;
                margin-top: @fieldVerticalPadding;
                margin-bottom: @fieldVerticalPadding;
                & > div {
                    background-color: white;
                }
            }
        }
    }
}
<commit_msg>Make metadata dialog scroll when it should (BL-6948)<commit_after>@import "../../bloomUI.less";
@import "../../bloomModalDialog.less";
@import "../../node_modules/react-table/react-table.css";

@fieldVerticalPadding: 0;
@fontSize: 10pt;

.bookMetadataDialog {
    font-family: @ui-fonts;
    font-size: @fontSize;
    max-height: 100vh;
    overflow-y: scroll;

    // for some reason that one gets overruled by the browser, so:
    textarea {
        font-family: @ui-fonts;
        font-size: @fontSize;
        padding: 5px 5px;
    }
    .dialogContent {
        .ReactTable {
            border: none;
            a.whatsthis {
                text-align: right;
                text-decoration: none;
                font-size: 9px;
                &:focus {
                    outline: 0;
                }
                &:hover {
                    text-decoration: underline;
                }
            }
            .rt-tr-group {
                border-bottom: none;
                margin-bottom: 10px;
            }
            .rt-td {
                border-right: none;
            }
            width: 500px;
            .rt-thead.-header {
                display: none;
            }
            .rt-td.label {
                padding-top: @fieldVerticalPadding;
                padding-bottom: @fieldVerticalPadding;
                text-align: right;
                margin-right: 10px;
            }
            .rt-td.value {
                // Enhance in the future: if this dialog actually gets used much, someone somewhere
                // will need it to be a different font in order to show the title or the author's name.
                // I (JH) am consciously choosing to not put the effort right now into building an API
                // endpoint for that and then calling and setting it in the tsx file.
                // Changed my mind on this... looks really ugly. Let's see how we do with just the system's font.
                // font-family: "Andika New Basic";

                // Some cells, we want grey (readonly), some are white (editable).
                // Since we don't have a way of putting a class on the rt-dt that
                // is the container of the cell, if it has padding, then both kinds
                // of cells will have the same background color surrounding the text or textarea.
                // So we take out the padding of the cell and leave it to the contents to add back
                // that space as padding.
                padding: 0;

                & > textarea {
                    height: 2em;
                    width: 100%;
                    border: none;
                    resize: none;
                    padding-top: @fieldVerticalPadding;
                    padding-bottom: @fieldVerticalPadding;
                }
            }
            // cover art
            img {
                height: 70px;
            }
            .loading {
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 2em;
            }

            .a11y-level-chooser {
                padding: 0 !important;
                margin-top: @fieldVerticalPadding;
                margin-bottom: @fieldVerticalPadding;
                & > div {
                    background-color: white;
                }
            }
        }
    }
}

{'fraction_non_alphanumeric': 0.08537134283570892, 'fraction_numerical': 0.008552138034508628, 'mean_word_length': 1.1202290076335877, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '4890604', 'n_tokens_mistral': 1775, 'n_tokens_neox': 1594, 'n_words': 543}