Refactor chat component styles for responsiveness and consistency

- 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.
This commit is contained in:
2026-07-02 18:22:56 +08:00
parent 34c8e2db4e
commit 38d31572dd
43 changed files with 217 additions and 174 deletions
@@ -11,13 +11,13 @@
justify-content: center;
gap: var(--spacing-sm);
width: 100%;
height: var(--button-height);
min-height: var(--button-height);
padding: 0 var(--spacing-lg);
border: var(--border-light) solid var(--color-chat-input-border);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.04);
color: var(--color-text-primary);
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;