improvement(ui): hide divider when following subblock value is null (#2608)

* improvement(ui): hide divider when following subblock value is null

* closed gap in mcp dynamic args subblock
This commit is contained in:
Waleed
2025-12-27 15:15:43 -08:00
committed by GitHub
parent 8651896277
commit 2e1ccb16f5
4 changed files with 38 additions and 25 deletions

View File

@@ -391,6 +391,17 @@
color: var(--text-primary);
}
/**
* Subblock divider visibility
* Hides dividers when adjacent subblocks render empty content (e.g., schedule-info without data).
* Uses CSS :has() to detect empty .subblock-content elements and hide associated dividers.
* Selectors ordered by ascending specificity: (0,4,0) then (0,5,0)
*/
.subblock-row:has(> .subblock-content:empty) > .subblock-divider,
.subblock-row:has(+ .subblock-row > .subblock-content:empty) > .subblock-divider {
display: none;
}
/**
* Dark mode specific overrides
*/

View File

@@ -537,7 +537,7 @@ export function McpDynamicArgs({
}
return (
<div className='relative space-y-4'>
<div className='relative'>
{/* Hidden dummy inputs to prevent browser password manager autofill */}
<input
type='text'
@@ -563,28 +563,30 @@ export function McpDynamicArgs({
tabIndex={-1}
readOnly
/>
{toolSchema.properties &&
Object.entries(toolSchema.properties).map(([paramName, paramSchema]) => {
const inputType = getInputType(paramSchema as any)
const showLabel = inputType !== 'switch'
<div className='space-y-4'>
{toolSchema.properties &&
Object.entries(toolSchema.properties).map(([paramName, paramSchema]) => {
const inputType = getInputType(paramSchema as any)
const showLabel = inputType !== 'switch'
return (
<div key={paramName} className='space-y-2'>
{showLabel && (
<Label
className={cn(
'font-medium text-sm',
toolSchema.required?.includes(paramName) &&
'after:ml-1 after:text-red-500 after:content-["*"]'
)}
>
{formatParameterLabel(paramName)}
</Label>
)}
{renderParameterInput(paramName, paramSchema as any)}
</div>
)
})}
return (
<div key={paramName} className='space-y-2'>
{showLabel && (
<Label
className={cn(
'font-medium text-sm',
toolSchema.required?.includes(paramName) &&
'after:ml-1 after:text-red-500 after:content-["*"]'
)}
>
{formatParameterLabel(paramName)}
</Label>
)}
{renderParameterInput(paramName, paramSchema as any)}
</div>
)
})}
</div>
</div>
)
}

View File

@@ -866,7 +866,7 @@ function SubBlockComponent({
}
return (
<div onMouseDown={handleMouseDown} className='flex flex-col gap-[10px]'>
<div onMouseDown={handleMouseDown} className='subblock-content flex flex-col gap-[10px]'>
{renderLabel(
config,
isValidJson,

View File

@@ -341,7 +341,7 @@ export function Editor() {
)
return (
<div key={stableKey}>
<div key={stableKey} className='subblock-row'>
<SubBlock
blockId={currentBlockId}
config={subBlock}
@@ -352,7 +352,7 @@ export function Editor() {
allowExpandInPreview={false}
/>
{index < subBlocks.length - 1 && (
<div className='px-[2px] pt-[16px] pb-[13px]'>
<div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
<div
className='h-[1.25px]'
style={{