diff --git a/src/App.css b/src/App.css index d9049f42..155f0e3f 100644 --- a/src/App.css +++ b/src/App.css @@ -3438,8 +3438,6 @@ body.has-player .chat-fab { .form-actions { display: flex; - /* A destructive action, Cancel and Save don't fit a phone side by side in - every face; the right group then drops to its own line, still right. */ flex-wrap: wrap; align-items: center; justify-content: space-between; @@ -3456,6 +3454,25 @@ body.has-player .chat-fab { margin-left: auto; } +/* A destructive action, Cancel and Save don't fit a phone side by side in + every face, and wrapped they would make a staircase. On a phone they stack: + Cancel and Save across the top, Save taking the room left, the destructive + action the full width under them. */ +@media (max-width: 512px) { + .form-actions:has(> .btn-danger) { + flex-direction: column-reverse; + align-items: stretch; + } + + .form-actions:has(> .btn-danger) > .form-actions-right { + margin-left: 0; + } + + .form-actions:has(> .btn-danger) > .form-actions-right > :last-child { + flex: 1; + } +} + /* Subtle text action. Resets the global