From 227b61b2a00ec186c6cc332f30484532a83fd958 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 11 Oct 2025 22:22:42 +0200
Subject: [PATCH] fix: improve bottom panel collapsed state and remove broken
 right panel close button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase collapsed bottom panel height from 40px to 48px for better proportions
- Show current state indicator in bottom panel even when collapsed
- Remove unnecessary and broken close button from right panel header

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Panels/RightPanel.tsx    | 26 ++++++++-----------------
 src/components/Timeline/BottomPanel.tsx |  2 +-
 src/stores/panelStore.ts                |  2 +-
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/components/Panels/RightPanel.tsx b/src/components/Panels/RightPanel.tsx
index a83cfb0..a521763 100644
--- a/src/components/Panels/RightPanel.tsx
+++ b/src/components/Panels/RightPanel.tsx
@@ -38,27 +38,17 @@ interface Props {
  */
 interface PanelHeaderProps {
   title: string;
-  onClose?: () => void;
   onCollapse: () => void;
 }
 
-const PanelHeader = ({ title, onClose, onCollapse }: PanelHeaderProps) => (
+const PanelHeader = ({ title, onCollapse }: PanelHeaderProps) => (
   <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
     <h2 className="text-sm font-semibold text-gray-700">{title}</h2>
-    <div className="flex items-center space-x-1">
-      {onClose && (
-        <Tooltip title="Close (Esc)">
-          <IconButton size="small" onClick={onClose}>
-            ✕
-          </IconButton>
-        </Tooltip>
-      )}
-      <Tooltip title="Collapse Panel">
-        <IconButton size="small" onClick={onCollapse}>
-          <ChevronRightIcon fontSize="small" />
-        </IconButton>
-      </Tooltip>
-    </div>
+    <Tooltip title="Collapse Panel">
+      <IconButton size="small" onClick={onCollapse}>
+        <ChevronRightIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
   </div>
 );
 
@@ -262,7 +252,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
         className="h-full bg-white border-l border-gray-200 flex flex-col"
         style={{ width: `${rightPanelWidth}px` }}
       >
-        <PanelHeader title="Actor Properties" onClose={onClose} onCollapse={collapseRightPanel} />
+        <PanelHeader title="Actor Properties" onCollapse={collapseRightPanel} />
 
         {/* Scrollable content */}
         <div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4">
@@ -431,7 +421,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
         className="h-full bg-white border-l border-gray-200 flex flex-col"
         style={{ width: `${rightPanelWidth}px` }}
       >
-        <PanelHeader title="Relation Properties" onClose={onClose} onCollapse={collapseRightPanel} />
+        <PanelHeader title="Relation Properties" onCollapse={collapseRightPanel} />
 
         {/* Scrollable content */}
         <div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4">
diff --git a/src/components/Timeline/BottomPanel.tsx b/src/components/Timeline/BottomPanel.tsx
index ed843f6..af5959a 100644
--- a/src/components/Timeline/BottomPanel.tsx
+++ b/src/components/Timeline/BottomPanel.tsx
@@ -95,7 +95,7 @@ const BottomPanel: React.FC = () => {
           <h3 className="font-semibold text-sm">Timeline</h3>
 
           {/* Current State Indicator */}
-          {currentState && !bottomPanelCollapsed && (
+          {currentState && (
             <>
               <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
               <div className="flex items-center gap-2 px-2 py-0.5 bg-blue-50 rounded border border-blue-200">
diff --git a/src/stores/panelStore.ts b/src/stores/panelStore.ts
index 6e59479..a7c3e72 100644
--- a/src/stores/panelStore.ts
+++ b/src/stores/panelStore.ts
@@ -60,7 +60,7 @@ const MAX_RIGHT_WIDTH = 500;
 const MIN_BOTTOM_HEIGHT = 150;
 const MAX_BOTTOM_HEIGHT = 500;
 const COLLAPSED_LEFT_WIDTH = 40;
-const COLLAPSED_BOTTOM_HEIGHT = 40;
+const COLLAPSED_BOTTOM_HEIGHT = 48;
 
 export const usePanelStore = create<PanelState>()(
   persist(