<commit_before>@import (reference) "form-runner-common";

.orbeon {

    @media (max-width: 980px) {

        .fr-view {
            width: auto;
            // Add padding on the sides, so the content doesn't touch the border of the viewport
            padding: 0 10px;
        }

        .span12 {
            // Don't use fixed width
            width: auto;
            // Isn't sized based on its container if floated
            float: none;
        }

        // Prevent mobile browsers from zooming when an input gets the focus
        &.xforms-mobile {
            select,
            textarea,
            input[type="text"],
            input[type="password"],
            input[type="datetime"],
            input[type="datetime-local"],
            input[type="date"],
            input[type="month"],
            input[type="time"],
            input[type="week"],
            input[type="number"],
            input[type="email"],
            input[type="url"],
            input[type="search"],
            input[type="tel"],
            input[type="color"] {
                font-size: 16px;
            }
        }
    }

    // For phones, use 1 column
    @media (max-width: 640px) {

        .xbl-fr-grid .fr-grid:not(.fr-repeat-single-row) {

            & > .fr-grid-body .fr-grid-td {
                // The main thing this CSS does: change table cells into blocks
                display: block;
            }

            &.fr-repeat-multiple-rows {
                // Only keep 2 table headers: one for the column with the dropdown button, and one for fields
                .fr-grid-th:nth-child(n+3) {
                    display: none
                }
            }
        }

        .fr-buttons {
            .xforms-trigger button {
                // Each button is on its own line and takes the whole line
                display: block;
                width: 100%;
                margin-left: 0;
            }
        }
    }

}<commit_msg>Fix #4805 "Responsive mode no longer shows one column layout"<commit_after>@import (reference) "form-runner-common";

.orbeon {

    @media (max-width: 980px) {

        .fr-view {
            width: auto;
            // Add padding on the sides, so the content doesn't touch the border of the viewport
            padding: 0 10px;
        }

        .span12 {
            // Don't use fixed width
            width: auto;
            // Isn't sized based on its container if floated
            float: none;
        }

        // Prevent mobile browsers from zooming when an input gets the focus
        &.xforms-mobile {
            select,
            textarea,
            input[type="text"],
            input[type="password"],
            input[type="datetime"],
            input[type="datetime-local"],
            input[type="date"],
            input[type="month"],
            input[type="time"],
            input[type="week"],
            input[type="number"],
            input[type="email"],
            input[type="url"],
            input[type="search"],
            input[type="tel"],
            input[type="color"] {
                font-size: 16px;
            }
        }
    }

    // For phones, use 1 column
    @media (max-width: 640px) {

        .xbl-fr-grid .fr-grid:not(.fr-repeat-single-row) {

            // https://github.com/orbeon/orbeon-forms/issues/4805
            & > .fr-grid-body .fr-grid-tr .fr-grid-td {
                // The main thing this CSS does: change table cells into blocks
                display: block;
            }

            &.fr-repeat-multiple-rows {
                // Only keep 2 table headers: one for the column with the dropdown button, and one for fields
                .fr-grid-th:nth-child(n+3) {
                    display: none
                }
            }
        }

        .fr-buttons {
            .xforms-trigger button {
                // Each button is on its own line and takes the whole line
                display: block;
                width: 100%;
                margin-left: 0;
            }
        }
    }

}
{'fraction_non_alphanumeric': 0.11331375428291728, 'fraction_numerical': 0.011747430249632892, 'mean_word_length': 1.2431394072447859, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 1, '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': '6989340', 'n_tokens_mistral': 1163, 'n_tokens_neox': 1063, 'n_words': 295}