feat: update visualization components to improve fullscreen handling

Author: yelabb

src/components/visualization/NeuralDynamicsPanel.tsx

@@ -448,7 +448,8 @@ export const NeuralDynamicsPanel = memo(function NeuralDynamicsPanel({
   return (
     <>
       {/* Normal view */}
-      <div className={`flex flex-col gap-2 ${isFullscreen ? 'hidden' : ''}`}>
+      {!isFullscreen && (
+      <div className="flex flex-col gap-2">
         {showControls && (
           <div className="flex items-center justify-between">
             <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
@@ -465,6 +466,7 @@ export const NeuralDynamicsPanel = memo(function NeuralDynamicsPanel({
           {statsContent}
         </div>
       </div>
+      )}
 
       {/* Fullscreen view */}
       <AnimatePresence>

src/components/visualization/NeuronCorrelationMatrix.tsx

@@ -429,7 +429,8 @@ export const NeuronCorrelationMatrix = memo(function NeuronCorrelationMatrix({
 
   return (
     <>
-      <div className={`flex flex-col gap-2 ${isFullscreen ? 'hidden' : ''}`}>
+      {!isFullscreen && (
+      <div className="flex flex-col gap-2">
         <div className="flex items-center justify-between">
           <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
             Correlation Matrix
@@ -464,6 +465,7 @@ export const NeuronCorrelationMatrix = memo(function NeuronCorrelationMatrix({
           <StatsDisplay />
         </div>
       </div>
+      )}
 
       {/* Fullscreen */}
       <AnimatePresence>

src/components/visualization/PopulationDynamics.tsx

@@ -364,7 +364,8 @@ export const PopulationDynamics = memo(function PopulationDynamics({
 
   return (
     <>
-      <div className={`flex flex-col gap-2 ${isFullscreen ? 'hidden' : ''}`}>
+      {!isFullscreen && (
+      <div className="flex flex-col gap-2">
         <div className="flex items-center justify-between">
           <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
             Population Dynamics
@@ -396,6 +397,7 @@ export const PopulationDynamics = memo(function PopulationDynamics({
           {statsContent}
         </div>
       </div>
+      )}
 
       {/* Fullscreen */}
       <AnimatePresence>

src/components/visualization/SpectralPowerPanel.tsx

@@ -377,7 +377,8 @@ export const SpectralPowerPanel = memo(function SpectralPowerPanel({
 
   return (
     <>
-      <div className={`flex flex-col gap-3 ${isFullscreen ? 'hidden' : ''}`}>
+      {!isFullscreen && (
+      <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between">
           <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
             Spectral Analysis
@@ -427,6 +428,7 @@ export const SpectralPowerPanel = memo(function SpectralPowerPanel({
           </span>
         </div>
       </div>
+      )}
 
       {/* Fullscreen */}
       <AnimatePresence>

src/components/visualization/SpikeRasterPlot.tsx

@@ -448,7 +448,8 @@ export const SpikeRasterPlot = memo(function SpikeRasterPlot({
   return (
     <>
       {/* Normal view */}
-      <div className={`flex flex-col gap-2 ${isFullscreen ? 'hidden' : ''}`}>
+      {!isFullscreen && (
+      <div className="flex flex-col gap-2">
         <div className="flex items-center justify-between">
           <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
             Spike Raster
@@ -463,6 +464,7 @@ export const SpikeRasterPlot = memo(function SpikeRasterPlot({
           {statsContent}
         </div>
       </div>
+      )}
 
       {/* Fullscreen view */}
       <AnimatePresence>