banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor chat component styles for responsiveness and consistency

Browse Source 
- 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:
chenhang
2026-07-02 18:22:56 +08:00
parent 34c8e2db4e
commit 38d31572dd
43 changed files with 217 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/chat/components/language-dialog.module.css
+11 -6
View File
@@ -8,22 +8,27 @@
align-items: center;
justify-content: center;
z-index: 50;
padding:
calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
}
.dialog {
width: calc(100% - 40px);
max-width: 360px;
width: 100%;
max-width: var(--dialog-max-width, 360px);
background: var(--color-surface, #1f1a2e);
border-radius: var(--radius-lg, 12px);
padding: var(--spacing-5, 20px);
display: flex;
flex-direction: column;
gap: var(--spacing-3, 12px);
max-height: 80vh;
max-height: min(80vh, calc(var(--app-visible-height, 100dvh) - 32px));
}
.title {
font-size: var(--font-size-lg, 18px);
font-size: var(--responsive-section-title, var(--font-size-lg, 18px));
font-weight: 600;
margin: 0;
color: var(--color-text-primary, #fff);
@@ -34,7 +39,7 @@
flex-direction: column;
gap: var(--spacing-1, 4px);
overflow-y: auto;
max-height: 60vh;
max-height: min(60vh, calc(var(--app-visible-height, 100dvh) - 120px));
}
.item {
@@ -46,7 +51,7 @@
border: 0;
border-radius: var(--radius-md, 8px);
color: var(--color-text-primary, #fff);
font-size: var(--font-size-base, 14px);
font-size: var(--responsive-body, var(--font-size-base, 14px));
text-align: left;
cursor: pointer;
}