discourse/plugins/chat/assets/stylesheets/mobile/chat-navbar.scss

.c-navbar {
  gap: 0.75rem;
  &-container {
    max-width: 100vw;
    padding-inline: 0.25rem;
  }
  &__actions {
    margin-right: 0.5rem;
  }
  &__back-button {
    align-self: stretch;
  }
  &.-full-title {
    .c-navbar {
      &__actions,
      &__back-button {
        height: calc(var(--chat-header-offset) - 2px) !important;
      }
      &__title {
        padding-block: calc(1rem + 2px);
      }
    }
    left: 0.25rem;
    width: calc(100% - 0.5rem);
  }
}
UX: chat navbar > alignments part 2 (#24985) * UX: chat navbar > alignments part 2 * Change copy to be consistent My threads * Dont show back button on full page desktop 2023-12-20 23:24:10 +08:00			`.c-navbar {`
UX: chat header size and alignments (#25239) This commit: - increased the size of chat-header-offset from 46px to 56px on mobile - tweaked navbar padding - Increased the gap between back button and title; this means no more perfect alignment, but I think that's perfectly fine and a fair trade off for an easier click target for the back button without fear of hitting the title 2024-01-12 21:27:44 +08:00			`gap: 0.75rem;`
UX: chat navbar > alignments part 2 (#24985) * UX: chat navbar > alignments part 2 * Change copy to be consistent My threads * Dont show back button on full page desktop 2023-12-20 23:24:10 +08:00			`&-container {`
UX: add max width for c-navbar on mobile to prevent horizontal scroll (#25182) 2024-01-09 20:18:05 +08:00			`max-width: 100vw;`
UX: chat navbar > alignments part 2 (#24985) * UX: chat navbar > alignments part 2 * Change copy to be consistent My threads * Dont show back button on full page desktop 2023-12-20 23:24:10 +08:00			`padding-inline: 0.25rem;`
			`}`
FEATURE: Mobile Chat Footer Redesign (#25161) This update adds three tabs to the bottom of the chat overlay to make it easier for users to navigate chat on mobile. As a result of this change: - Direct Messages are now shown separately from public channels on mobile - My Threads has now moved from the channel list to it's own tab on mobile - My Threads can still be accessed on desktop via the sidebar and within the drawer channel list - Chat back button has been updated to navigate to the correct tab (for both channels and threads) Some special cases: - If DMs are not used then the tab is not rendered - If the user has no threads then the tab is not rendered - If both the tabs for DMs and Threads aren't available then the whole footer will not be rendered - Chat footer is only shown on the listing pages (DMs, Channels, My Threads) --------- Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> 2024-01-16 14:29:33 +08:00			`&__actions {`
			`margin-right: 0.5rem;`
			`}`
UX: chat header size and alignments (#25239) This commit: - increased the size of chat-header-offset from 46px to 56px on mobile - tweaked navbar padding - Increased the gap between back button and title; this means no more perfect alignment, but I think that's perfectly fine and a fair trade off for an easier click target for the back button without fear of hitting the title 2024-01-12 21:27:44 +08:00			`&__back-button {`
			`align-self: stretch;`
			`}`
FIX: Make long thread titles readable (#25456) When reaching the top of a thread, the full thread title will be displayed if it was too long to fit. It works in mobile, drawer mode, and fullscreen. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> 2024-01-30 21:18:00 +08:00			`&.-full-title {`
			`.c-navbar {`
			`&__actions,`
			`&__back-button {`
			`height: calc(var(--chat-header-offset) - 2px) !important;`
			`}`
			`&__title {`
			`padding-block: calc(1rem + 2px);`
			`}`
			`}`
			`left: 0.25rem;`
			`width: calc(100% - 0.5rem);`
			`}`
UX: chat navbar > alignments part 2 (#24985) * UX: chat navbar > alignments part 2 * Change copy to be consistent My threads * Dont show back button on full page desktop 2023-12-20 23:24:10 +08:00			`}`