#app img { max-height: 3em; max-width: 3em; } #app ul { font-size: 0.75em; margin: 0.25em 0 0 0; padding: 0 0 0 0; list-style-type: none; max-height: 80vh; overflow: auto; } #app li { margin: 0.25em 0.25em 0 0; } #app #chats { overflow: hidden; display: flex; text-align: left; } #app #users { margin: 0em 1.0em 0em 0.05em; } #app #chat { position: relative; max-height: 100vh; width: 100vh; /*border: 2px solid green;*/ overflow: hidden; } #app #members { font-size: 1em; } #app #add_chat_off { text-decoration: underline; cursor: pointer; } #app #add_chat_on { cursor: pointer; } #app #messages { max-height: 60vh; overflow: scroll; overflow-y: scroll; overflow-x: hidden; font-size: 0.75em; } #app #input_user{ color: green; width: 8.5em; height: 1.1em; font-size: 0.65em; border: none; outline: none; border-bottom: 0.15em solid green; } #app #input_chat{ position: sticky; bottom: 0; /*width: calc(100% - 8px);*/ width: 100%; border: none; outline: none; border-bottom: 0.2em solid green; caret-color: green; color: green; font-size: 16px; } #app #you { text-align: left; position: relative; max-width: 48%; left: 0.5em; margin: 0.5em 0 0 0; color: green; word-wrap: break-word; } #app #other { text-align: right; position: relative; max-width: 48%; margin: 0.5em 0 0 auto; right: 0.5em; color: red; /* permet le retour à la ligne à la place de dépasser*/ word-wrap: break-word; }