Fix padding below prompt config

This commit is contained in:
akhisud3195 2025-07-21 15:52:11 +05:30
parent 6544fbaa9d
commit cb23be8e16
3 changed files with 20 additions and 9 deletions

View file

@ -313,7 +313,7 @@ export function AgentConfig({
/>
</div>
{/* Examples Section */}
<div className="space-y-2">
<div className="space-y-2 mb-6">
<div className="flex items-center gap-2">
<label className={sectionHeaderStyles}>Examples</label>
<button

View file

@ -60,7 +60,10 @@ interface EmptyStateProps {
}
const EmptyState: React.FC<EmptyStateProps> = ({ entity, hasFilteredItems }) => (
<div className="flex items-center justify-center h-24 text-sm text-zinc-400 dark:text-zinc-500">
<div className={clsx(
"flex items-center justify-center h-24 text-sm text-zinc-400 dark:text-zinc-500",
entity === "prompts" && "pb-6"
)}>
{hasFilteredItems ? "No tools to show" : `No ${entity} created`}
</div>
);
@ -359,10 +362,10 @@ export function EntityList({
};
return (
<div ref={containerRef} className="flex flex-col h-full">
<div ref={containerRef} className="flex flex-col h-full min-h-0">
<ResizablePanelGroup
direction="vertical"
className="h-full"
className="flex-1 min-h-0 flex flex-col"
style={{ gap: `${GAP_SIZE}px` }}
>
{/* Agents Panel */}
@ -370,12 +373,13 @@ export function EntityList({
defaultSize={getPanelSize('agents')}
minSize={expandedPanels.agents ? 20 : 8}
maxSize={100}
className="flex flex-col min-h-0 h-full"
>
<Panel
variant="entity-list"
tourTarget="entity-agents"
className={clsx(
"h-full overflow-hidden",
"flex flex-col min-h-0 h-full overflow-hidden",
!expandedPanels.agents && "h-[53px]!"
)}
title={
@ -470,12 +474,13 @@ export function EntityList({
defaultSize={getPanelSize('tools')}
minSize={expandedPanels.tools ? 20 : 8}
maxSize={100}
className="flex flex-col min-h-0 h-full"
>
<Panel
variant="entity-list"
tourTarget="entity-tools"
className={clsx(
"h-full overflow-hidden",
"flex flex-col min-h-0 h-full overflow-hidden",
!expandedPanels.tools && "h-[53px]!"
)}
title={
@ -601,12 +606,13 @@ export function EntityList({
defaultSize={getPanelSize('prompts')}
minSize={expandedPanels.prompts ? 20 : 8}
maxSize={100}
className="flex flex-col min-h-0 h-full"
>
<Panel
variant="entity-list"
tourTarget="entity-prompts"
className={clsx(
"h-full overflow-hidden",
"h-full",
!expandedPanels.prompts && "h-[53px]!"
)}
title={

View file

@ -42,6 +42,7 @@ interface PanelProps {
className?: string;
onClick?: () => void;
tourTarget?: string;
overflow?: 'hidden' | 'visible' | 'auto' | 'scroll' | undefined;
}
export function Panel({
@ -55,19 +56,23 @@ export function Panel({
className,
onClick,
tourTarget,
overflow,
}: PanelProps) {
const isEntityList = variant === 'entity-list';
return <div
className={clsx(
"flex flex-col overflow-hidden rounded-xl border relative w-full",
"flex flex-col rounded-xl border relative w-full",
// Only apply overflow-hidden if no custom overflow is set (for backward compatibility)
overflow ? undefined : "overflow-hidden",
variant === 'copilot' ? "border-blue-200 dark:border-blue-800" : "border-zinc-200 dark:border-zinc-800",
"bg-white dark:bg-zinc-900",
maxHeight ? "max-h-(--panel-height)" : "h-full",
className
)}
style={{
'--panel-height': maxHeight
'--panel-height': maxHeight,
...(overflow ? { overflow } : {})
} as React.CSSProperties}
onClick={onClick}
data-tour-target={tourTarget}