FIX: various fixes following channel height changes (#21553)
- apply height on threads list - apply height on thread - correctly applies env(safe-area-inset-bottom)
This commit is contained in:
parent
5ce0697348
commit
660a40ca06
|
@ -10,14 +10,16 @@
|
|||
height: calc(
|
||||
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
|
||||
var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
|
||||
var(--chat-direct-message-creator-height, 0px)
|
||||
var(--chat-direct-message-creator-height, 0px) -
|
||||
env(safe-area-inset-bottom)
|
||||
);
|
||||
|
||||
.footer-nav-ipad & {
|
||||
height: calc(
|
||||
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
|
||||
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
|
||||
var(--chat-direct-message-creator-height, 0px)
|
||||
var(--chat-direct-message-creator-height, 0px) -
|
||||
env(safe-area-inset-bottom)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -94,7 +94,9 @@ html.rtl {
|
|||
height: auto !important;
|
||||
}
|
||||
|
||||
.chat-channel {
|
||||
.chat-channel,
|
||||
.chat-thread,
|
||||
.chat-thread-list {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,29 +0,0 @@
|
|||
.chat-thread-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&__items {
|
||||
overflow-y: scroll;
|
||||
@include chat-scrollbar();
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
overscroll-behavior: contain;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.chat-thread-list-item {
|
||||
margin: 0.75rem 0.25rem 0.75rem 0.5rem;
|
||||
|
||||
& + .chat-thread-list-item {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__no-threads {
|
||||
@include thread-list-item;
|
||||
margin: 0.5rem 0rem 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
|
@ -1,9 +1,24 @@
|
|||
.chat-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
height: calc(
|
||||
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
|
||||
var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
|
||||
var(--chat-direct-message-creator-height, 0px) -
|
||||
env(safe-area-inset-bottom)
|
||||
);
|
||||
|
||||
.footer-nav-ipad & {
|
||||
height: calc(
|
||||
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
|
||||
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
|
||||
var(--chat-direct-message-creator-height, 0px) -
|
||||
env(safe-area-inset-bottom)
|
||||
);
|
||||
}
|
||||
|
||||
&__header {
|
||||
height: var(--chat-header-offset);
|
||||
min-height: var(--chat-header-offset);
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
.chat-thread-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
height: calc(
|
||||
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
|
||||
var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
|
||||
var(--chat-direct-message-creator-height, 0px) -
|
||||
env(safe-area-inset-bottom)
|
||||
);
|
||||
|
||||
.footer-nav-ipad & {
|
||||
height: calc(
|
||||
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
|
||||
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
|
||||
var(--chat-direct-message-creator-height, 0px) -
|
||||
env(safe-area-inset-bottom)
|
||||
);
|
||||
}
|
||||
|
||||
&__items {
|
||||
overflow-y: scroll;
|
||||
@include chat-scrollbar();
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
overscroll-behavior: contain;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.chat-thread-list-item {
|
||||
margin: 0.75rem 0.25rem 0.75rem 0.5rem;
|
||||
|
||||
& + .chat-thread-list-item {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__no-threads {
|
||||
@include thread-list-item;
|
||||
margin: 0.5rem 0rem 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
|
@ -48,5 +48,5 @@
|
|||
@import "incoming-chat-webhooks";
|
||||
@import "reviewable-chat-message";
|
||||
@import "chat-thread-list-item";
|
||||
@import "chat-thread-list";
|
||||
@import "chat-threads-list";
|
||||
@import "chat-thread-original-message";
|
||||
|
|
Loading…
Reference in New Issue