- Updated padding and margin properties across various chat components to utilize responsive design tokens, ensuring better adaptability to different screen sizes.
- Replaced fixed sizes with responsive variables for buttons, avatars, and bubbles to enhance UI flexibility.
- Adjusted font sizes to use responsive tokens, improving text readability on various devices.
- Standardized border-radius and other dimensions using CSS variables for a cohesive design language.
- Enhanced dialog and screen components with safe area insets for better compatibility with modern devices.
FB IAB on Xiaomi (and similar WebViews that don't shrink 100dvh) keeps
the chat input covered by the soft keyboard. Fix by writing the
visualViewport-derived keyboard height to a CSS variable on <html> and
consuming it as padding-bottom on the chat input bar.
- Add useKeyboardHeight hook (visualViewport + rAF batching, no re-renders)
- Apply --keyboard-height + env(safe-area-inset-bottom) to .bar padding
- Add scrollIntoView on textarea focus so the input stays visible
- Add viewportFit: cover so safe-area-inset-bottom is reported
admin