fix: panels height and scrolling consistency

src/componets/content/ConfigTemplate.tsx

@@ -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="space-y-3 flex flex-col h-full">
-          <div className="flex items-center justify-between flex-wrap gap-3">
+          <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="space-y-3 flex flex-col h-full">
-          <div className="flex items-center gap-2 flex-wrap">
+          <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 
+              ${isValidJson
-                ? 'border-green-300 bg-green-50' 
+                ? '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>

src/componets/content/Content.tsx

@@ -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">
+    <div className="animate-fade-in h-full">
-      <CodeBlock code={xml} language="xml" maxHeight="500px" />
+      <CodeBlock code={xml} language="xml" maxHeight="100%" />
     </div>
   );
 }
@@ -79,8 +79,8 @@ ${templateContent}
 </engine>`;
 
   return (
-    <div className="animate-fade-in">
+    <div className="animate-fade-in h-full">
-      <CodeBlock code={xml} language="xml" maxHeight="500px" />
+      <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="animate-fade-in space-y-4 h-full flex flex-col">
-      <div className="flex items-center gap-2">
+      <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>
   );
 }