- TRA-77 - Scroll behaviour in the Message History adapted to support both scrolling by the end user, and ensuring the last message is shown when new messages are added, or resizing is done.
This commit is contained in:
@@ -1,45 +1,3 @@
|
||||
|
||||
/* Chat App Container Layout */
|
||||
.chat-app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 0; /* Belangrijk voor flexbox overflow */
|
||||
padding: 20px; /* Algemene padding voor alle kanten */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Gemeenschappelijke container voor consistente breedte */
|
||||
.chat-component-container {
|
||||
width: 100%;
|
||||
max-width: 1000px; /* Optimale breedte */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1; /* Neemt beschikbare verticale ruimte in */
|
||||
}
|
||||
|
||||
/* Message Area - neemt alle beschikbare ruimte */
|
||||
.chat-messages-area {
|
||||
flex: 1; /* Neemt alle beschikbare ruimte */
|
||||
overflow: hidden; /* Voorkomt dat het groter wordt dan container */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; /* Belangrijk voor nested flexbox */
|
||||
margin-bottom: 20px; /* Ruimte tussen messages en input */
|
||||
border-radius: 15px;
|
||||
background: var(--history-background);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
max-width: 1000px; /* Optimale breedte */
|
||||
margin-left: auto;
|
||||
margin-right: auto; /* Horizontaal centreren */
|
||||
align-self: center; /* Extra centrering in flexbox context */
|
||||
}
|
||||
|
||||
/* Chat Input - altijd onderaan */
|
||||
.chat-input-area {
|
||||
flex: none; /* Neemt alleen benodigde ruimte */
|
||||
@@ -56,14 +14,6 @@
|
||||
align-self: center; /* Extra centrering in flexbox context */
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px; /* Ruimte voor scrollbar */
|
||||
margin-right: -10px; /* Compenseer voor scrollbar */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Chat Input styling */
|
||||
|
||||
.chat-input {
|
||||
|
||||
Reference in New Issue
Block a user