Update components/PropertiesPanel.tsx

components/PropertiesPanel.tsx

@@ -1,10 +1,9 @@
 
-
 import React from 'react';
 import { Node } from 'reactflow';
 import { NodeData, LayerDefinition, LogEntry } from '../types';
 import { LAYER_DEFINITIONS } from '../constants';
-import { X, Trash2, Activity, Info, CheckCircle, AlertTriangle, AlertOctagon } from 'lucide-react';
+import { X, Trash2, Activity, Info, CheckCircle, AlertTriangle, AlertOctagon, ChevronDown } from 'lucide-react';
 
 interface PropertiesPanelProps {
   selectedNode: Node<NodeData> | null;
@@ -12,15 +11,30 @@ interface PropertiesPanelProps {
   onDelete: (id: string) => void;
   onClose: () => void;
   logs?: LogEntry[];
+  isOpen: boolean; // Mobile visibility state
 }
 
-const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChange, onDelete, onClose, logs = [] }) => {
+const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChange, onDelete, onClose, logs = [], isOpen }) => {
+  
+  const containerClasses = `
+    bg-slate-900 flex flex-col transition-all duration-300 z-30 shadow-2xl
+    fixed inset-x-0 bottom-0 h-[60vh] w-full border-t border-slate-700 rounded-t-xl
+    ${isOpen ? 'translate-y-0' : 'translate-y-full'}
+    md:relative md:inset-auto md:h-full md:w-80 md:border-l md:border-t-0 md:rounded-none md:translate-y-0 md:shadow-none
+  `;
+
   if (!selectedNode) {
     return (
-      <div className="w-80 bg-slate-900 border-l border-slate-800 flex flex-col h-full">
-        <div className="p-4 border-b border-slate-800 flex items-center gap-2">
-            <Activity size={18} className="text-blue-400"/>
-            <h2 className="text-sm font-bold text-slate-200 uppercase tracking-wider">System Activity</h2>
+      <div className={containerClasses}>
+        <div className="p-4 border-b border-slate-800 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+                <Activity size={18} className="text-blue-400"/>
+                <h2 className="text-sm font-bold text-slate-200 uppercase tracking-wider">System Activity</h2>
+            </div>
+            {/* Mobile Close Handle */}
+            <button onClick={onClose} className="md:hidden text-slate-500 hover:text-white">
+                <ChevronDown size={20} />
+            </button>
         </div>
         
         <div className="flex-1 overflow-y-auto p-4 space-y-3 scrollbar-thin scrollbar-thumb-slate-700">
@@ -65,7 +79,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChang
   
   if (!definition) {
     return (
-      <div className="w-80 bg-slate-900 border-l border-slate-800 flex flex-col h-full">
+      <div className={containerClasses}>
           <div className="p-4 border-b border-slate-800 flex justify-between items-center">
                <h2 className="text-lg font-bold text-slate-100">Unknown Layer</h2>
                <button onClick={onClose}><X size={18} className="text-slate-500 hover:text-white"/></button>
@@ -106,7 +120,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChang
   };
 
   return (
-    <div className="w-80 bg-slate-900 border-l border-slate-800 flex flex-col h-full">
+    <div className={containerClasses}>
       <div className="p-4 border-b border-slate-800 flex justify-between items-center">
         <div>
           <h2 className="text-lg font-bold text-slate-100">{definition.label}</h2>