clean up frontend

app/styles/app.scss

@@ -27,10 +27,97 @@
 @import "@appuniversum/ember-appuniversum/styles/a-utilities";
 
 // CHAT
+
+/* ==================================
+   #CHAT LAYOUT
+   Sidebar with the conversation overview (1/5 of the screen) next to a
+   content area that fills the rest of the screen under the main header.
+   ================================== */
+.chat-sidebar {
+  @include mq(medium) {
+    flex-basis: 20%;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+/* The conversations are listed as navigation: title on top, date + time in
+   subscript. Titles are truncated when they do not fit. */
+.chat-sidebar__list {
+  display: block;
+}
+.chat-sidebar__link {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.1rem;
+}
+.chat-sidebar__title {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chat-sidebar__meta {
+  font-size: var(--au-tiny);
+  color: var(--au-gray-600);
+  text-decoration: none;
+}
+.chat-sidebar__empty {
+  margin: 0;
+  padding: $au-unit-tiny * 1.5 $au-unit-small;
+
+  @include mq(medium) {
+    padding: $au-unit-small $au-unit-small + $au-unit-tiny;
+  }
+}
+
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* Bar above the chat: the conversation title, truncated, and a button to
+   start a new conversation. */
+.chat-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.6rem 1rem;
+  border-bottom: 1px solid var(--au-gray-200);
+  flex-shrink: 0;
+}
+.chat-toolbar__title {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The conversations overview: a big button to start a conversation. */
+.chat-start {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 8rem);
+
+  @include mq(medium) {
+    min-height: 0;
+  }
+}
+
 .chat-window {
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-height: 0;
   height: calc(100vh - 8rem);
+
+  @include mq(medium) {
+    height: auto;
+  }
 }
 .chat-window__messages {
   flex: 1;