Differences From Artifact [0ae397da9f]:

• File src/default.css — part of check-in [dfc20f4297] at 2020-12-26 15:40:13 on branch chat-mode-bottom-up — Implement bottom-up and top-down chat layouts in chat-only mode and normal mode. There is a minor scroll-on-new-message quirk or two to resolve, but it otherwise seems to work. (user: stephan size: 40259)

To Artifact [1e1cc864c6]:

• File src/default.css — part of check-in [8e12b61b50] at 2020-12-26 16:20:46 on branch chat-mode-bottom-up — Disabled position:sticky on the input area when in bottom-up chat mode pending resolution of a scrolling misbehaviour for messages with IMG tags. IMG.src is loaded async, so the scrolling is actually working but loading of the IMG.src is then pushing the message back down behind/under the input field. (user: stephan size: 40534) [more...]

1670
1671
1672
1673
1674
1675
1676
1677
1678





1679
1680
1681
1682
1683
1684
1685

       z-index higher than this one. */;
}
body.chat.chat-bottom-up #chat-input-area {
  border-bottom: none;
  border-top: 1px solid black;
  margin-bottom: 0;
  margin-top: 0.5em;
  position: sticky;
  bottom: 0;





}
/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.25em;

|

>
>
>
>
>

1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690

       z-index higher than this one. */;
}
body.chat.chat-bottom-up #chat-input-area {
  border-bottom: none;
  border-top: 1px solid black;
  margin-bottom: 0;
  margin-top: 0.5em;
  position: initial /*sticky currently disabled due to scrolling-related issues*/;
  bottom: 0;
}
/* An internal hack to try to help resolve a message-scrolling quirk
   when #chat-input-area is sticky on the bottom of the screen. */
body.chat.chat-bottom-up #chat-input-area.unsticky {
  position: initial;
}
/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.25em;