change chat from a sidebar to a column (#3113)

* change chat from a sidebar to a column

Using a 2-column layout prevents the chat scrollbar from overlapping the page
scrollbar. Also, it no longer needs to calculate extra padding for elements.

* remove unused Sidebar.tsx

* fix css for chat column

* re-center "Go to last message" button

* main content column always uses maximum height

* lint

* re-hide scrollbars in mainContent on chromium

* fix chat column width when input is over-full

* chat is only fixed-width in desktop

---------

Co-authored-by: janWilejan <>

web/components/ui/Content/Content.module.scss

@@ -1,5 +1,28 @@
 @import '../../../styles/mixins';
 
+.main {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  height: 100%;
+
+  // I'm not quite sure why, but sass ignores `#chat-container` here
+  [id="chat-container"] {
+    width: var(--chat-col-width);
+  }
+}
+
+.mainColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.mainColumn::-webkit-scrollbar, .mainColumn::-webkit-scrollbar-thumb {
+  display: none;
+}
+
 .lowerSection {
   padding: var(--content-padding);
 }
@@ -59,6 +82,7 @@
 
 .desktopActionButtons {
   display: block;
+  width: 100%;
 
   @include screen(tablet) {
     display: none;