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