From 94431df236e43a764a3ada251a2b5113522c583d Mon Sep 17 00:00:00 2001
From: likljn <hzz118@kakao.com>
Date: Sun, 18 Jan 2026 18:37:08 +0900
Subject: [PATCH] fix(core): make member popover responsive (#14277)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 .../database-block/properties/member/style.css.ts           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/database-block/properties/member/style.css.ts b/packages/frontend/core/src/blocksuite/database-block/properties/member/style.css.ts
index 7eef5d24d5..d86696beae 100644
--- a/packages/frontend/core/src/blocksuite/database-block/properties/member/style.css.ts
+++ b/packages/frontend/core/src/blocksuite/database-block/properties/member/style.css.ts
@@ -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({