Added server.tsx and make it work with tab system

src/App.tsx

@@ -87,7 +87,7 @@ function AppContent() {
 
     // Determine what to show based on current tab
     const currentTabData = tabs.find(tab => tab.id === currentTab);
-    const showTerminalView = currentTabData?.type === 'terminal';
+    const showTerminalView = currentTabData?.type === 'terminal' || currentTabData?.type === 'server';
     const showHome = currentTabData?.type === 'home';
     const showSshManager = currentTabData?.type === 'ssh_manager';
     

src/components/ui/button-group.tsx

@@ -1,4 +1,4 @@
-import { Children, ReactElement, cloneElement } from 'react';
+import { Children, ReactElement, cloneElement, isValidElement } from 'react';
 
 import { ButtonProps } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 interface ButtonGroupProps {
   className?: string;
   orientation?: 'horizontal' | 'vertical';
-  children: ReactElement<ButtonProps>[];
+  children: ReactElement<ButtonProps>[] | React.ReactNode;
 }
 
 export const ButtonGroup = ({
@@ -14,10 +14,15 @@ export const ButtonGroup = ({
   orientation = 'horizontal',
   children,
 }: ButtonGroupProps) => {
-  const totalButtons = Children.count(children);
   const isHorizontal = orientation === 'horizontal';
   const isVertical = orientation === 'vertical';
 
+  // Normalize and filter only valid React elements
+  const childArray = Children.toArray(children).filter((child): child is ReactElement<ButtonProps> =>
+    isValidElement(child)
+  );
+  const totalButtons = childArray.length;
+
   return (
     <div
       className={cn(
@@ -29,7 +34,7 @@ export const ButtonGroup = ({
         className
       )}
     >
-      {Children.map(children, (child, index) => {
+      {childArray.map((child, index) => {
         const isFirst = index === 0;
         const isLast = index === totalButtons - 1;
 

src/contexts/TabContext.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useState, useRef, ReactNode } from 'r
 
 export interface Tab {
     id: number;
-    type: 'home' | 'terminal' | 'ssh_manager';
+    type: 'home' | 'terminal' | 'ssh_manager' | 'server';
     title: string;
     hostConfig?: any;
     terminalRef?: React.RefObject<any>;

src/ui/Navigation/Hosts/Host.tsx

@@ -37,16 +37,14 @@ export function Host({ host }: HostProps): React.ReactElement {
     const tags = Array.isArray(host.tags) ? host.tags : [];
     const hasTags = tags.length > 0;
     
-    const handleTerminalClick = () => {
-        console.log('Terminal button clicked for host:', host);
     const title = host.name?.trim() ? host.name : `${host.username}@${host.ip}:${host.port}`;
-        console.log('Creating terminal tab with title:', title);
+
-        const tabId = addTab({
+    const handleTerminalClick = () => {
-            type: 'terminal',
+        addTab({ type: 'terminal', title, hostConfig: host });
-            title,
+    };
-            hostConfig: host,
+
-        });
+    const handleServerClick = () => {
-        console.log('Created terminal tab with ID:', tabId);
+        addTab({ type: 'server', title, hostConfig: host });
     };
     
     return (
@@ -59,7 +57,7 @@ export function Host({ host }: HostProps): React.ReactElement {
                     {host.name || host.ip}
                 </p>
                 <ButtonGroup className="flex-shrink-0">
-                    <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                    <Button variant="outline" className="!px-2 border-1 border-[#303032]" onClick={handleServerClick}>
                         <Server/>
                     </Button>
                     <Button 

src/ui/Navigation/Tabs/Tab.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {ButtonGroup} from "@/components/ui/button-group.tsx";
 import {Button} from "@/components/ui/button.tsx";
-import {Home, SeparatorVertical, X} from "lucide-react";
+import {Home, SeparatorVertical, X, Terminal as TerminalIcon, Server as ServerIcon} from "lucide-react";
 
 interface TabProps {
     tabType: string;
@@ -31,7 +31,8 @@ export function Tab({tabType, title, isActive, onActivate, onClose, onSplit, can
         );
     }
 
-    if (tabType === "terminal") {
+    if (tabType === "terminal" || tabType === "server") {
+        const isServer = tabType === 'server';
         return (
             <ButtonGroup>
                 <Button
@@ -40,7 +41,8 @@ export function Tab({tabType, title, isActive, onActivate, onClose, onSplit, can
                     onClick={onActivate}
                     disabled={disableActivate}
                 >
-                    {title || "Terminal"}
+                    {isServer ? <ServerIcon className="mr-1 h-4 w-4"/> : <TerminalIcon className="mr-1 h-4 w-4"/>}
+                    {title || (isServer ? 'Server' : 'Terminal')}
                 </Button>
                 {canSplit && (
                     <Button

src/ui/Navigation/TopNavbar.tsx

@@ -51,11 +51,13 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
                         const isActive = tab.id === currentTab;
                         const isSplit = Array.isArray(allSplitScreenTab) && allSplitScreenTab.includes(tab.id);
                         const isTerminal = tab.type === 'terminal';
+                        const isServer = tab.type === 'server';
                         const isSshManager = tab.type === 'ssh_manager';
-                        // Old logic port:
+                        // Split availability
-                        const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
+                        const isSplittable = isTerminal || isServer;
                         // Disable split entirely when on Home or SSH Manager
-                        const disableSplit = isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager || isSshManager;
+                        const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
+                        const disableSplit = !isSplittable || isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager;
                         const disableActivate = isSplit || ((tab.type === 'home' || tab.type === 'ssh_manager') && isSplitScreenActive);
                         const disableClose = (isSplitScreenActive && isActive) || isSplit;
                         return (
@@ -65,10 +67,10 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
                                 title={tab.title}
                                 isActive={isActive}
                                 onActivate={() => handleTabActivate(tab.id)}
-                                onClose={isTerminal || isSshManager ? () => handleTabClose(tab.id) : undefined}
+                                onClose={isTerminal || isServer || isSshManager ? () => handleTabClose(tab.id) : undefined}
-                                onSplit={isTerminal ? () => handleTabSplit(tab.id) : undefined}
+                                onSplit={isSplittable ? () => handleTabSplit(tab.id) : undefined}
-                                canSplit={isTerminal}
+                                canSplit={isSplittable}
-                                canClose={isTerminal || isSshManager}
+                                canClose={isTerminal || isServer || isSshManager}
                                 disableActivate={disableActivate}
                                 disableSplit={disableSplit}
                                 disableClose={disableClose}
@@ -81,7 +83,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
                     <Button
                         variant="outline"
                         onClick={() => setIsTopbarOpen(false)}
-                        className="w-[28px] h-[28]"
+                        className="w-[28px] h-[28px]"
                     >
                         <ChevronUpIcon/>
                     </Button>

src/ui/SSH/Server/Server.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useSidebar } from "@/components/ui/sidebar";
+
+interface ServerProps {
+	hostConfig?: any;
+	title?: string;
+	isVisible?: boolean;
+	isTopbarOpen?: boolean;
+	embedded?: boolean; // when rendered inside a pane in TerminalView
+}
+
+export function Server({ hostConfig, title, isVisible = true, isTopbarOpen = true, embedded = false }: ServerProps): React.ReactElement {
+	const { state: sidebarState } = useSidebar();
+
+	const topMarginPx = isTopbarOpen ? 74 : 16;
+	const leftMarginPx = sidebarState === 'collapsed' ? 16 : 8;
+	const bottomMarginPx = 16;
+
+	const wrapperStyle: React.CSSProperties = embedded
+		? { opacity: isVisible ? 1 : 0, height: '100%', width: '100%' }
+		: {
+				opacity: isVisible ? 1 : 0,
+				marginLeft: leftMarginPx,
+				marginRight: 17,
+				marginTop: topMarginPx,
+				marginBottom: bottomMarginPx,
+				height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
+		  };
+
+	const containerClass = embedded
+		? "h-full w-full text-white overflow-hidden bg-transparent"
+		: "bg-[#18181b] text-white rounded-lg border-2 border-[#303032] overflow-hidden";
+
+	return (
+		<div style={wrapperStyle} className={containerClass}>
+			<div className="h-full w-full flex items-center justify-center">
+				<div className="text-sm opacity-70 text-center">
+					<div>{title || 'Server'}</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/ui/SSH/Terminal/TerminalView.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from "react";
 import {TerminalComponent} from "./TerminalComponent.tsx";
+import {Server as ServerView} from "@/ui/SSH/Server/Server.tsx";
 import {useTabs} from "@/contexts/TabContext";
 import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
 import * as ResizablePrimitive from "react-resizable-panels";
 import { useSidebar } from "@/components/ui/sidebar";
+import {LucideRefreshCcw, LucideRefreshCw, RefreshCcw, RefreshCcwDot} from "lucide-react";
+import { Button } from "@/components/ui/button.tsx";
 
 interface TerminalViewProps {
     isTopbarOpen?: boolean;
@@ -13,12 +16,13 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
     const {tabs, currentTab, allSplitScreenTab} = useTabs() as any;
     const { state: sidebarState } = useSidebar();
 
-    const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal');
+    const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal' || tab.type === 'server');
 
     const containerRef = useRef<HTMLDivElement | null>(null);
     const panelRefs = useRef<Record<string, HTMLDivElement | null>>({});
     const [panelRects, setPanelRects] = useState<Record<string, DOMRect | null>>({});
     const [ready, setReady] = useState<boolean>(true);
+    const [resetKey, setResetKey] = useState<number>(0);
 
     const updatePanelRects = () => {
         const next: Record<string, DOMRect | null> = {};
@@ -79,7 +83,7 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
     useEffect(() => {
         scheduleMeasureAndFit();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [allSplitScreenTab.length, isTopbarOpen, sidebarState]);
+    }, [allSplitScreenTab.length, isTopbarOpen, sidebarState, resetKey]);
 
     useEffect(() => {
         const roContainer = containerRef.current ? new ResizeObserver(() => {
@@ -145,6 +149,7 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
                     return (
                         <div key={t.id} style={finalStyle}>
                             <div className="absolute inset-0 rounded-md" style={{background:'#18181b'}}>
+                                {t.type === 'terminal' ? (
                                     <TerminalComponent
                                         ref={t.terminalRef}
                                         hostConfig={t.hostConfig}
@@ -153,6 +158,15 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
                                         showTitle={false}
                                         splitScreen={allSplitScreenTab.length>0}
                                     />
+                                ) : (
+                                    <ServerView
+                                        hostConfig={t.hostConfig}
+                                        title={t.title}
+                                        isVisible={effectiveVisible}
+                                        isTopbarOpen={isTopbarOpen}
+                                        embedded
+                                    />
+                                )}
                             </div>
                         </div>
                     );
@@ -161,6 +175,23 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
         );
     };
 
+    const ResetButton = ({ onClick }: { onClick: () => void }) => (
+        <Button
+            type="button"
+            variant="ghost"
+            onClick={onClick}
+            aria-label="Reset split sizes"
+            className="absolute top-0 right-0 h-[28px] w-[28px] !rounded-none border-l-1 border-b-1 border-[#222224] bg-[#1b1b1e] hover:bg-[#232327] text-white flex items-center justify-center p-0"
+        >
+            <RefreshCcw className="h-4 w-4" />
+        </Button>
+    );
+
+    const handleReset = () => {
+        setResetKey((k) => k + 1);
+        requestAnimationFrame(() => scheduleMeasureAndFit());
+    };
+
     const renderSplitOverlays = () => {
         const splitTabs = terminalTabs.filter((tab: any) => allSplitScreenTab.includes(tab.id));
         const mainTab = terminalTabs.find((tab: any) => tab.id === currentTab);
@@ -174,16 +205,19 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
             const [a,b] = layoutTabs as any[];
             return (
                 <div style={{ position:'absolute', inset:0, zIndex:10, pointerEvents:'none' }}>
-                    <ResizablePrimitive.PanelGroup direction="horizontal" className="h-full w-full" {...commonGroupProps}>
+                    <ResizablePrimitive.PanelGroup key={resetKey} direction="horizontal" className="h-full w-full" {...commonGroupProps}>
                         <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${a.id}`} order={1}>
                             <div ref={el => { panelRefs.current[String(a.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',background:'transparent',position:'relative'}}>
-                                <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{a.title}</div>
+                                <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{a.title}</div>
                             </div>
                         </ResizablePanel>
                         <ResizableHandle style={handleStyle}/>
                         <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${b.id}`} order={2}>
                             <div ref={el => { panelRefs.current[String(b.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',background:'transparent',position:'relative'}}>
-                                <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{b.title}</div>
+                                <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>
+                                    {b.title}
+                                    <ResetButton onClick={handleReset} />
+                                </div>
                             </div>
                         </ResizablePanel>
                     </ResizablePrimitive.PanelGroup>
@@ -194,18 +228,21 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
             const [a,b,c] = layoutTabs as any[];
             return (
                 <div style={{ position:'absolute', inset:0, zIndex:10, pointerEvents:'none' }}>
-                    <ResizablePrimitive.PanelGroup direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
+                    <ResizablePrimitive.PanelGroup key={resetKey} direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
                         <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id="top-panel" order={1}>
-                            <ResizablePanelGroup direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
+                            <ResizablePanelGroup key={`top-${resetKey}`} direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
                                 <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${a.id}`} order={1}>
                                     <div ref={el => { panelRefs.current[String(a.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
-                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{a.title}</div>
+                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{a.title}</div>
                                     </div>
                                 </ResizablePanel>
                                 <ResizableHandle style={handleStyle}/>
                                 <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${b.id}`} order={2}>
                                     <div ref={el => { panelRefs.current[String(b.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
-                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{b.title}</div>
+                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>
+                                            {b.title}
+                                            <ResetButton onClick={handleReset} />
+                                        </div>
                                     </div>
                                 </ResizablePanel>
                             </ResizablePanelGroup>
@@ -213,7 +250,7 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
                         <ResizableHandle style={handleStyle}/>
                         <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id="bottom-panel" order={2}>
                             <div ref={el => { panelRefs.current[String(c.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
-                                <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{c.title}</div>
+                                <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{c.title}</div>
                             </div>
                         </ResizablePanel>
                     </ResizablePrimitive.PanelGroup>
@@ -224,34 +261,37 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
             const [a,b,c,d] = layoutTabs as any[];
             return (
                 <div style={{ position:'absolute', inset:0, zIndex:10, pointerEvents:'none' }}>
-                    <ResizablePrimitive.PanelGroup direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
+                    <ResizablePrimitive.PanelGroup key={resetKey} direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
                         <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id="top-panel" order={1}>
-                            <ResizablePanelGroup direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
+                            <ResizablePanelGroup key={`top-${resetKey}`} direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
-                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${a.id}`} order={1}>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${a.id}`} order={1}>
                                     <div ref={el => { panelRefs.current[String(a.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
-                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{a.title}</div>
+                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{a.title}</div>
                                     </div>
                                 </ResizablePanel>
                                 <ResizableHandle style={handleStyle}/>
-                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w_full" id={`panel-${b.id}`} order={2}>
+                                <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${b.id}`} order={2}>
                                     <div ref={el => { panelRefs.current[String(b.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
-                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{b.title}</div>
+                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>
+                                            {b.title}
+                                            <ResetButton onClick={handleReset} />
+                                        </div>
                                     </div>
                                 </ResizablePanel>
                             </ResizablePanelGroup>
                         </ResizablePanel>
                         <ResizableHandle style={handleStyle}/>
                         <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id="bottom-panel" order={2}>
-                            <ResizablePanelGroup direction="horizontal" className="h-full w-full" id="bottom-horizontal" {...commonGroupProps}>
+                            <ResizablePanelGroup key={`bottom-${resetKey}`} direction="horizontal" className="h-full w-full" id="bottom-horizontal" {...commonGroupProps}>
                                 <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${c.id}`} order={1}>
                                     <div ref={el => { panelRefs.current[String(c.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
-                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{c.title}</div>
+                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{c.title}</div>
                                     </div>
                                 </ResizablePanel>
                                 <ResizableHandle style={handleStyle}/>
                                 <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${d.id}`} order={2}>
                                     <div ref={el => { panelRefs.current[String(d.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
-                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{d.title}</div>
+                                        <div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{d.title}</div>
                                     </div>
                                 </ResizablePanel>
                             </ResizablePanelGroup>