ssa/configucci
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: panels height and scrolling consistency
Some checks failed
CI / build-and-test (push) Failing after 11m13s
Details

Browse Source
This commit is contained in:
sokol
2026-02-20 17:49:00 +03:00
parent ecded86467
commit a7563b1f98
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/componets/content/ConfigTemplate.tsx
View File

@@ -141,10 +141,10 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
const isValidJson = jsonError === null;
return (
<div className="config-template-editor animate-fade-in">
<div className="config-template-editor animate-fade-in h-full flex flex-col">
{mode === 'view' ? (
<div className="space-y-3">
<div className="flex items-center justify-between flex-wrap gap-3">
<div className="space-y-3 flex flex-col h-full">
<div className="flex-shrink-0 flex items-center justify-between flex-wrap gap-3">
<div className="flex items-center gap-2 flex-wrap">
<Badge variant="success">View Mode</Badge>
{hasValidationWarnings && (
@@ -164,11 +164,13 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
</Button>
</div>
<CodeBlock code={config.template.content || '{}'} language="json" maxHeight="500px" />
<div className="flex-1 min-h-0">
<CodeBlock code={config.template.content || '{}'} language="json" maxHeight="100%" />
</div>
</div>
) : (
<div className="space-y-3">
<div className="flex items-center gap-2 flex-wrap">
<div className="space-y-3 flex flex-col h-full">
<div className="flex-shrink-0 flex items-center gap-2 flex-wrap">
<Button
variant="success"
size="sm"
@@ -211,7 +213,7 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
</div>
{jsonError && (
<div className="bg-red-50 border border-red-200 rounded-lg p-3">
<div className="bg-red-50 border border-red-200 rounded-lg p-3 flex-shrink-0">
<p className="text-sm text-red-700 font-mono">{jsonError}</p>
</div>
)}
@@ -221,8 +223,8 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
w-full p-3 font-mono text-sm rounded-lg border-2
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition-all duration-200
${isValidJson
? 'border-green-300 bg-green-50'
${isValidJson
? 'border-green-300 bg-green-50'
: 'border-red-300 bg-red-50'
}
`}
@@ -230,7 +232,7 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
onChange={(e) => handleDraftChange(e.target.value)}
onKeyDown={handleKeyDown}
rows={20}
style={{ whiteSpace: 'pre', overflowX: 'auto' }}
style={{ whiteSpace: 'pre', overflowX: 'auto', flex: '1 1 auto', minHeight: '200px' }}
spellCheck={false}
/>
</div>

20
src/componets/content/Content.tsx
View File

@@ -59,10 +59,10 @@ export function Content({ config, env, onTemplateSaved }: ContentProps) {
function ContentParams({ env }: { env: Env }) {
const xml = Builder.getEnv(env).build();
return (
<div className="animate-fade-in">
<CodeBlock code={xml} language="xml" maxHeight="500px" />
<div className="animate-fade-in h-full">
<CodeBlock code={xml} language="xml" maxHeight="100%" />
</div>
);
}
@@ -79,8 +79,8 @@ ${templateContent}
</engine>`;
return (
<div className="animate-fade-in">
<CodeBlock code={xml} language="xml" maxHeight="500px" />
<div className="animate-fade-in h-full">
<CodeBlock code={xml} language="xml" maxHeight="100%" />
</div>
);
}
@@ -97,8 +97,8 @@ function ContentTest({ config, env }: { config: Config; env: Env }) {
}));
return (
<div className="animate-fade-in space-y-4">
<div className="flex items-center gap-2">
<div className="animate-fade-in space-y-4 h-full flex flex-col">
<div className="flex-shrink-0 flex items-center gap-2">
<label className="text-sm font-medium text-slate-700">Select Environment:</label>
<select
className="px-3 py-1.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -110,8 +110,10 @@ function ContentTest({ config, env }: { config: Config; env: Env }) {
))}
</select>
</div>
<CodeBlock code={filledTemplate} language="json" maxHeight="500px" />
<div className="flex-1 min-h-0">
<CodeBlock code={filledTemplate} language="json" maxHeight="100%" />
</div>
</div>
);
}