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:
Joffrey JAFFEUX 2023-05-15 14:39:11 +02:00 committed by GitHub
parent 5ce0697348
commit 660a40ca06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 68 additions and 34 deletions

View File

@ -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)
);
}

View File

@ -94,7 +94,9 @@ html.rtl {
height: auto !important;
}
.chat-channel {
.chat-channel,
.chat-thread,
.chat-thread-list {
height: 100%;
}
}

View File

@ -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;
}
}

View File

@ -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);

View File

@ -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;
}
}

View File

@ -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";