mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-04 00:28:33 +00:00
fix(core): make member popover responsive (#14277)
## Problem In Kanban view, clicking the `Empty` value for the Member property can cause the member popover layout to overflow/break due to a fixed container width. ### Before ScreenShot <img width="410" height="119" alt="image" src="https://github.com/user-attachments/assets/e0d28a37-2ea4-4a65-afca-e4ef10af37dd" /> ## Repro 1. Open a Database in Kanban view 2. Ensure the Member property has some cards with `Empty` 3. Click the `Empty` member value 4. Observe the popover layout overflow/broken UI ## Solution Make the popover container responsive by using `width: 100%` with `maxWidth: 415px` to preserve the original intended size while preventing overflow in narrow containers. ### After ScreenShot <img width="410" height="146" alt="image (1)" src="https://github.com/user-attachments/assets/d97e6b8b-eabc-499a-9f04-0422505c67bf" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved member selector popover styling: unified padding, made width responsive with a max width limit, and added box-sizing for more consistent layout and spacing across screen sizes. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const memberPopoverContainer = style({
|
||||
padding: '8px 0 0 0',
|
||||
width: '415px',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
maxWidth: '415px',
|
||||
boxSizing: 'border-box',
|
||||
});
|
||||
|
||||
export const memberPopoverContent = style({
|
||||
|
||||
Reference in New Issue
Block a user