- Small changes to allow for keyboard input, not finished
This commit is contained in:
@@ -21,7 +21,9 @@
|
||||
/* App container layout */
|
||||
.app-container {
|
||||
display: flex;
|
||||
/* Use visual viewport variable when available */
|
||||
/* Op desktop gebruiken we de veilige viewporthoogte direct; op mobiel
|
||||
laten we html/body de hoogte bepalen en neemt de app-container
|
||||
eenvoudig 100% daarvan in via de media query verderop. */
|
||||
min-height: 0;
|
||||
height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
|
||||
width: 100%;
|
||||
@@ -93,7 +95,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
height: auto; /* prefer dynamic viewport on desktop */
|
||||
height: auto; /* desktop: dynamische hoogte, op mobiel overschreven */
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
@@ -103,6 +105,26 @@
|
||||
min-height: 0; /* laat kinderen (ChatApp) krimpen */
|
||||
}
|
||||
|
||||
/* Op mobiel sluiten we de volledige content-kolom strak aan op de veilige
|
||||
viewporthoogte zodat alleen de chatcontent zelf kan scrollen en niet de
|
||||
gehele pagina wanneer het toetsenbord opent. */
|
||||
@media (max-width: 768px) {
|
||||
.app-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
|
||||
min-height: 0;
|
||||
|
||||
Reference in New Issue
Block a user