mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-15 17:12:59 -04:00
18 lines
1.1 KiB
CSS
18 lines
1.1 KiB
CSS
.chat-composer { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.125rem; min-width: 0; overflow: hidden; }
|
|
/* Narrow sidebars need two deliberate control rows. Giving the nickname
|
|
control a full flex row prevents the nickname, message, and send controls
|
|
from technically fitting by crushing all three into unreadable widths. */
|
|
.chat-composer-nickname { flex: 1 1 100%; min-width: 0; order: 1; }
|
|
.chat-composer-input { flex: 1 1 0%; min-width: 0; order: 2; }
|
|
.chat-composer-send { flex: 0 0 auto; align-self: stretch; order: 3; }
|
|
.chat-composer-tts { display: flex; flex: 1 1 100%; align-items: center; gap: 0.125rem; min-width: 0; overflow: hidden; order: 4; }
|
|
@container (min-width: 44rem) {
|
|
.chat-composer { flex-wrap: nowrap; }
|
|
/* Wide panels restore the original fixed nickname slot so the message input
|
|
receives the remaining row width instead of competing with that form. */
|
|
.chat-composer-nickname { flex: 0 0 7rem; order: 1; }
|
|
.chat-composer-input { order: 2; }
|
|
.chat-composer-tts { flex: 0 1 auto; order: 3; }
|
|
.chat-composer-send { order: 4; }
|
|
}
|