- Introduce cache busting (to circumvent aggressive caching on iOS - but ideal in other contexts as well)
- Change the build process to allow cache busting - Optimisations to the build process - Several improvements of UI geared towards mobile experience -
This commit is contained in:
@@ -79,6 +79,16 @@
|
||||
|
||||
.chat-input-area {
|
||||
max-width: 100%; /* Op mobiel volledige breedte gebruiken */
|
||||
/* Respect safe-area at bottom */
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
|
||||
/* Prevent iOS focus zoom by ensuring form controls are >= 16px */
|
||||
input, textarea, select, button,
|
||||
.chat-input input, .chat-input textarea, .chat-input select, .chat-input button,
|
||||
.mobile-language-selector :is(select, input, button) {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
@@ -97,6 +107,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* When keyboard is open, allow a bit more space below */
|
||||
body.keyboard-open .chat-input-area {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 8px);
|
||||
}
|
||||
|
||||
/* Extra small screens */
|
||||
@media (max-width: 480px) {
|
||||
.chat-app-container {
|
||||
@@ -251,15 +266,6 @@
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.form-message .message-content {
|
||||
max-width: 90%;
|
||||
background: white;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* System messages */
|
||||
.system-message {
|
||||
text-align: center;
|
||||
@@ -437,24 +443,6 @@
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.message {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* moved to ChatMessage.vue scoped styles */
|
||||
|
||||
.message.user .message-content {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.message.ai .message-content,
|
||||
.message.bot .message-content {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.message {
|
||||
padding: 0 10px;
|
||||
|
||||
Reference in New Issue
Block a user