ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: enhance mobile layout for prejoin component and improve participant name input background

master
Carlos Santos 2025-09-23 19:44:00 +02:00
parent 1b9396ca1b
commit 246be8bcf2
2 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
View File

@ -285,50 +285,61 @@
// Mobile Layout Optimization
.prejoin-container.mobile {
all: unset;
padding: 0;
align-items: stretch;
display: content;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
overflow: hidden;
.prejoin-content {
max-width: none;
height: 100vh;
height: 100%;
display: flex;
flex-direction: column;
.prejoin-main {
width: 100%;
height: 100vh;
border-radius: 0;
flex: 1;
display: flex;
flex-direction: column;
.video-preview-section {
// Video section takes remaining space after configuration
flex: 1;
min-height: 0; // Allow flexbox to shrink
// Video takes all remaining space
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
.video-preview-container {
width: 100%;
height: 100%;
aspect-ratio: unset;
border-radius: 0;
}
}
.configuration-section {
// Configuration section adapts to content
flex: 0 0 auto;
padding: 16px;
gap: 16px;
background: var(--ov-surface-color, #ffffff);
// Ensure minimum usable space but allow growth
min-height: fit-content;
max-height: 40vh; // Prevent taking too much space
overflow-y: auto; // Scroll if content is too tall
// Ensure content is displayed in column
display: flex;
flex-direction: column;
.join-section .join-button {
height: 48px;
min-height: 48px;
}
}
.vb-container {
// Virtual background panel also adapts to content
// Virtual background panel - also adapts to content
flex: 0 0 auto;
max-height: 40vh;
max-height: 60vh;
overflow-y: auto;
background: var(--ov-surface-color, #ffffff);
}
}
}

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
View File

@ -41,7 +41,7 @@
padding: 0 16px;
border: none;
outline: none;
background: transparent;
background: var(--ov-input-background, #f8f9fa);
font-size: 16px;
font-weight: 500;
color: var(--ov-text-surface-color, #666);