, and nothing in this app styles it. Dropped into .settings-form__row — a flex row whose .field__input is the flex:1 item — the div becomes the flex item instead and the input shrinks to its intrinsic width, exactly when the admin needs to edit what they just typed. display:contents takes the wrapper out of the layout while leaving it in the DOM. Scoped to this modal rather than global: the admin settings forms carry the same wrapper and the same latent collapse, but widening a layout fix onto surfaces this change was asked to leave alone is not this slice's call. */ .project-settings .field_with_errors { display: contents; } .project-settings__section + .project-settings__section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } .settings-account { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); } /* The role tag sits in a flex column; hug its content instead of stretching full width. */ .settings-account .settings-row__badge { align-self: flex-start; margin-top: 2px; } @media (max-width: 640px) { .settings__body { grid-template-columns: 1fr; } .settings__menu { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--color-border); } .modal.settings { max-height: 92vh; } .modal.project-settings { max-height: 92vh; } /* Stack each row's actions below its name/badge so they don't collide at narrow width. */ .settings-row { flex-wrap: wrap; } .settings-row__main { flex-basis: 60%; } .settings-row__actions { width: 100%; } /* The access select's fixed width is what aligns the column at full width; here there is no room for it beside the project name, so the name takes the line and the select the next. */ .settings-permissions__project { flex-wrap: wrap; } .settings-permissions__access { min-width: 100%; } /* A request-type row carries three actions — triage can be switched off per type — which is one more than fits beside a name and a thread count here. Left to wrap on its own, each row broke at a different point depending on how wide its count happened to be ("1 thread" vs "12 threads"), so a lone Delete button hung under some rows and not others. Giving the actions their own line makes every row break the same way. A parts row carries two rather than three, and takes the same treatment so the two sections break identically. */ .settings-row__head { flex-wrap: wrap; } .settings-row__head .settings-row__actions { justify-content: flex-start; } .settings-taxonomy__usage { margin-left: 0; } } /*# sourceMappingURL=/assets/application-4440301b.css.map */