@media (max-width: 520px) {
    .surface-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .surface-row > .colour-dot {
        grid-column: 1;
        grid-row: 1;
    }

    .surface-row > div {
        grid-column: 2;
        grid-row: 1;
    }

    .surface-row > label,
    .surface-row > label:last-child {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .surface-row input {
        min-width: 0;
        width: 100%;
    }
}