discourse/plugins/chat/assets/stylesheets/common/chat-side-panel.scss

#main-chat-outlet.chat-view {
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-areas: "main threads";
  grid-template-columns: 1fr;

  &.has-side-panel-expanded {
    grid-template-columns: 3fr 2fr;
  }
}

.chat-side-panel {
  grid-area: threads;
  min-height: 100%;
  box-sizing: border-box;
  border-left: 1px solid var(--primary-medium);

  &__list {
    flex-grow: 1;
    padding: 0 1.5em 1em;
  }
}
FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel 2023-02-14 11:38:41 +10:00			`#main-chat-outlet.chat-view {`
FIX: Overflowing chat content in main-chat-outlet grid (#20301) Follow up to 82b4a53d29b6e043001e37cb448f077a19067a33 On mobile, we just need to add `min-width: 0` to `chat-live-pane` so it will not overflow the grid defined in `main-chat-outlet.chat-view`. The overflow could be triggered by: 1. Replying on mobile to a really long chat message 2. Uploading > 2 files Both of these situations are fixed. 2023-02-15 12:48:18 +10:00			`min-height: 0;`
			`display: grid;`
			`grid-template-rows: 1fr;`
			`grid-template-areas: "main threads";`
			`grid-template-columns: 1fr;`

FEATURE: Chat side panel with threads initial skeleton (#20209) This commit introduces the skeleton of the chat thread UI. The structure of the components looks like this. Its done this way so the side panel can be used for other things as well if we wish, not just for threads: ``` .main-chat-outlet <ChatLivePane /> <ChatSidePanel> <-- rendered with {{outlet}} --> <ChatThread /> </ChatSidePanel> ``` Later on the `ChatThreadList` will be rendered here as well. Now, when you go to a channel you can open a thread by clicking on either the Open Thread message action button or by clicking on the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`. This works on mobile as well. This commit includes basic serializers and routes for threads, as well as a new `ChatThreadsManager` service in JS that caches threads for a channel the same way the channel threads manager does. The chat messages inside the thread are intentionally left out until a later PR. NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions and the threading_enabled boolean on a ChatChannel 2023-02-14 11:38:41 +10:00			`&.has-side-panel-expanded {`
			`grid-template-columns: 3fr 2fr;`
			`}`
			`}`

			`.chat-side-panel {`
			`grid-area: threads;`
			`min-height: 100%;`
			`box-sizing: border-box;`
			`border-left: 1px solid var(--primary-medium);`

			`&__list {`
			`flex-grow: 1;`
			`padding: 0 1.5em 1em;`
			`}`
			`}`