shinalok/youlbot-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct chip CSS selector and remove size=sm causing 26px height

Browse Source 
- .example-chip-btn button -> button.example-chip-btn (class is on button itself)
- .example-chips-row .block for flex:1 wrapper layout
- Remove size='sm' which forced height:26px via Gradio sm class
- Add height:auto !important to allow min-height:80px to take effect

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
shinalok
2026-06-02 17:55:46 +09:00
co-authored by Claude Sonnet 4.6
parent dedafedcf5
commit 6c01426e37
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+13 -13
View File
@@ -577,11 +577,13 @@ footer { display: none !important; }
gap: 10px !important; gap: 10px !important;
align-items: stretch !important; align-items: stretch !important;
} }
.example-chip-btn { /* 버튼 wrapper(.block)에 flex:1 적용 */
.example-chips-row .block {
flex: 1 !important; flex: 1 !important;
min-width: 0 !important; min-width: 0 !important;
} }
.example-chip-btn button { /* 버튼 자체에 셀렉터 적용 (elem_classes가 button에 직접 붙음) */
button.example-chip-btn {
border-radius: 16px !important; border-radius: 16px !important;
border: 1.5px solid #e8edf4 !important; border: 1.5px solid #e8edf4 !important;
background: #ffffff !important; background: #ffffff !important;
@@ -590,24 +592,22 @@ footer { display: none !important; }
font-size: 1rem !important; font-size: 1rem !important;
font-weight: 400 !important; font-weight: 400 !important;
line-height: 1.5 !important; line-height: 1.5 !important;
box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.02) !important; box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
white-space: normal !important; white-space: normal !important;
text-align: left !important; text-align: left !important;
width: 100% !important; width: 100% !important;
height: 100% !important; height: auto !important;
min-height: 80px !important; min-height: 80px !important;
justify-content: flex-start !important; justify-content: flex-start !important;
transition: all .2s ease !important; transition: all .2s ease !important;
} }
.example-chip-btn button::after { button.example-chip-btn::after {
content: ' →'; content: ' →';
color: #94a3b8; color: #94a3b8;
font-size: .8rem; font-size: .85rem;
margin-left: 4px; margin-left: 6px;
transition: color .2s, transform .2s;
display: inline-block;
} }
.example-chip-btn button:hover { button.example-chip-btn:hover {
background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%) !important; background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%) !important;
border-color: #a5b4fc !important; border-color: #a5b4fc !important;
color: #1e40af !important; color: #1e40af !important;
@@ -697,8 +697,8 @@ div:focus,
.dark .message-wrap .bot { background: #1e293b !important; border-color: #334155 !important; } .dark .message-wrap .bot { background: #1e293b !important; border-color: #334155 !important; }
.dark .nav-btn button:hover { background: #1e293b !important; } .dark .nav-btn button:hover { background: #1e293b !important; }
.dark .nav-btn button.nav-active { background: #1e3a5f !important; color: #93c5fd !important; } .dark .nav-btn button.nav-active { background: #1e3a5f !important; color: #93c5fd !important; }
.dark .example-chip-btn button { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; box-shadow: 0 1px 6px rgba(0,0,0,.3) !important; } .dark button.example-chip-btn { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; box-shadow: 0 1px 6px rgba(0,0,0,.3) !important; }
.dark .example-chip-btn button:hover { background: linear-gradient(135deg, #1e3a5f, #1e1b4b) !important; border-color: #818cf8 !important; color: #c7d2fe !important; } .dark button.example-chip-btn:hover { background: linear-gradient(135deg, #1e3a5f, #1e1b4b) !important; border-color: #818cf8 !important; color: #c7d2fe !important; }
.dark #control-panel { background: #1e293b !important; border-color: #334155 !important; } .dark #control-panel { background: #1e293b !important; border-color: #334155 !important; }
""" """
@@ -802,7 +802,7 @@ with gr.Blocks(title="율봇", css=_CUSTOM_CSS, theme=_THEME, js=_JS) as demo:
# D4-4: 예시 질문 Chips — 버튼 label은 이모지 포함, 전송값은 텍스트만 # D4-4: 예시 질문 Chips — 버튼 label은 이모지 포함, 전송값은 텍스트만
with gr.Row(elem_classes=["example-chips-row"]): with gr.Row(elem_classes=["example-chips-row"]):
chip_btns = [ chip_btns = [
gr.Button(label, elem_classes=["example-chip-btn"], size="sm") gr.Button(label, elem_classes=["example-chip-btn"])
for label, _ in _EXAMPLE_CHIPS for label, _ in _EXAMPLE_CHIPS
] ]