.chat-browse-view { position: relative; height: calc(100vh - var(--header-offset)); overflow-y: scroll; @include chat-scrollbar(var(--secondary)); @include breakpoint(mobile-large) { padding-right: 1rem; //fix for different scroll behaviour on mobile where overflow-y:scroll acts like auto } &__header { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 1rem 1rem; } &__title { box-sizing: border-box; } &__content_wrapper { margin: 2rem 0 1rem 1rem; box-sizing: border-box; @include breakpoint(tablet) { margin-top: 1rem; } } &__cards { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.5rem; @include breakpoint(tablet) { grid-template-columns: repeat(1, 1fr); grid-gap: 1.5rem; } } &__actions { display: flex; justify-content: space-between; align-items: end; margin: 0 0 0 1rem; @include breakpoint(tablet) { flex-direction: column; .dc-filter-input-container { margin-top: 1rem; } .dc-filter-input-container, nav { width: 100%; } } } &__filters { display: flex; align-items: center; margin: 0; &:before { content: none; //there is a strange thing applied on nav-pills and this resets it } @include breakpoint(mobile-large) { justify-content: space-between; } } &__filter { display: inline; margin-right: 1em; &:last-of-type { margin-right: 0; } @include breakpoint(mobile-large) { margin: 0; } } &__filter-link, &__filter-link:visited { color: var(--primary); font-size: var(--font-up-2); padding: 0 0.25rem; @include breakpoint(tablet) { font-size: var(--font-up-1); } } .chat-channel-card { .chat-channel-card__leave-btn { padding: 0; &:hover, &:focus { background: none; } &:focus { @include default-focus; } } } }