/*
 * Resource edit forms (film, series, season, episode) place their sidebar with
 * Filament's Flex component. Only the main column carries `fi-growable`; the
 * sidebar has no width of its own, so its flex-basis resolves to the content's
 * max-content width. With long helper texts in the sidebar that came out wider
 * than the row, leaving the main column near a hundred pixels and wrapping its
 * labels one letter per line.
 *
 * Below 64rem Filament already stacks the two columns, so this only applies
 * where they sit side by side.
 */
@media (min-width: 64rem) {
    .fi-sc-flex.fi-from-lg > :not(.fi-growable) {
        flex: 0 0 24rem;
        max-width: 24rem;
    }

    /* Lets the main column shrink instead of forcing the row to overflow. */
    .fi-sc-flex.fi-from-lg > .fi-growable {
        min-width: 0;
    }
}

/* A field label and its hint action share one row. When the column is narrow the
 * hint used to ride over the text beneath it; wrapping keeps them apart. */
.fi-fo-field-label-col {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}