Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-15 00:04:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix the video grid getting clipped at the edges

Browse Source 
And also, put the scroll bar in a more sensible spot by turning the footer into a proper sticky footer.
This commit is contained in:
Robin 2023-09-25 14:16:29 -04:00
parent 7dac9caa6b
commit 14bd53c02b
4 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/room/InCallView.module.css
View File

@ -17,18 +17,18 @@ limitations under the License.
.inRoom { .inRoom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
min-height: 100%;
height: 100%; height: 100%;
width: 100%; width: 100%;
--footerPadding: var(--cpd-space-4x);
--footerHeight: calc(50px + 2 * var(--footerPadding));
} }
.controlsOverlay { .controlsOverlay {
position: relative; position: relative;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
overflow: auto;
overflow-inline: hidden;
contain: strict;
} }
.centerMessage { .centerMessage {
@ -45,17 +45,15 @@ limitations under the License.
} }
.footer { .footer {
position: absolute; position: sticky;
left: 0; inset-block-end: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
grid-template-areas: "logo buttons layout"; grid-template-areas: "logo buttons layout";
align-items: center; align-items: center;
gap: var(--cpd-space-3x); gap: var(--cpd-space-3x);
padding: var(--footerPadding) var(--inline-content-inset); padding-block: var(--cpd-space-4x);
padding-inline: var(--inline-content-inset);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%,
@ -84,14 +82,14 @@ limitations under the License.
} }
@media (min-height: 400px) { @media (min-height: 400px) {
.inRoom { .footer {
--footerPadding: var(--cpd-space-10x); padding-block: var(--cpd-space-10x);
} }
} }
@media (min-height: 800px) { @media (min-height: 800px) {
.inRoom { .footer {
--footerPadding: var(--cpd-space-15x); padding-block: var(--cpd-space-15x);
} }
} }

1
src/room/LobbyView.module.css
View File

@ -23,7 +23,6 @@ limitations under the License.
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
padding-block-end: var(--footerHeight);
} }
@media (max-width: 500px) { @media (max-width: 500px) {

7
src/video-grid/NewVideoGrid.module.css
View File

@ -15,14 +15,11 @@ limitations under the License.
*/ */
.grid { .grid {
contain: strict; contain: layout style;
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
margin-inline: var(--inline-content-inset); margin-inline: var(--inline-content-inset);
padding-block-end: var(--footerHeight); margin-block: var(--cpd-space-4x);
margin-block-start: var(--cpd-space-4x);
overflow-y: auto;
overflow-x: hidden;
} }
.slots { .slots {

1
src/video-grid/VideoGrid.module.css
View File

@ -19,5 +19,4 @@ limitations under the License.
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
touch-action: none; touch-action: none;
margin-bottom: var(--footerHeight);
} }