ui: Tighten up right panel spacing and layout

src/components/adjustments/Color.tsx

@@ -158,7 +158,7 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
 
   return (
     <div>
-      <div className="flex items-center justify-start gap-2 mb-4 mt-2">
+      <div className="px-1 flex items-center justify-start gap-2 mb-4 mt-2">
         {tabs.map((tab) => {
           const isActive = activeTab === tab.id;
           return (
@@ -193,7 +193,7 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
         </button>
       </div>
 
-      <div className="relative w-full mb-4">
+      <div className="relative w-full mb-4 px-1">
         <AnimatePresence mode="wait">
           {activeTab === '3way' ? (
             <motion.div
@@ -328,7 +328,7 @@ const ColorCalibrationPanel = ({ adjustments, setAdjustments, onDragStateChange
   const trackSuffix = `${activePrimary}s`;
 
   return (
-    <div className="p-2 bg-bg-tertiary rounded-md mt-4">
+    <div className="bg-bg-tertiary rounded-md">
       <Text variant={TextVariants.heading} className="mb-2">
         Color Calibration
       </Text>
@@ -449,7 +449,7 @@ export default function ColorPanel({
 
   return (
     <div className="space-y-4">
-      <div className="p-2 bg-bg-tertiary rounded-md">
+      <div className="bg-bg-tertiary rounded-md">
         <div className="flex justify-between items-center mb-2">
           <Text variant={TextVariants.heading}>White Balance</Text>
           {!isForMask && toggleWbPicker && (
@@ -491,7 +491,7 @@ export default function ColorPanel({
         />
       </div>
 
-      <div className="p-2 bg-bg-tertiary rounded-md">
+      <div className="bg-bg-tertiary rounded-md">
         <Text variant={TextVariants.heading} className="mb-2">
           Presence
         </Text>
@@ -515,7 +515,7 @@ export default function ColorPanel({
         />
       </div>
 
-      <div className="p-2 bg-bg-tertiary rounded-md">
+      <div className="bg-bg-tertiary rounded-md">
         <Text variant={TextVariants.heading} className="mb-3">
           Color Grading
         </Text>
@@ -527,7 +527,7 @@ export default function ColorPanel({
         />
       </div>
 
-      <div className="p-2 bg-bg-tertiary rounded-md">
+      <div className="bg-bg-tertiary rounded-md">
         <Text variant={TextVariants.heading} className="mb-3">
           Color Mixer
         </Text>

src/components/adjustments/Details.tsx

@@ -27,9 +27,9 @@ export default function DetailsPanel({
   const adjustmentVisibility = appSettings?.adjustmentVisibility || {};
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-8">
       {adjustmentVisibility.sharpening !== false && (
-        <div className="p-2 bg-bg-tertiary rounded-md">
+        <div className="bg-bg-tertiary rounded-md">
           <Text variant={TextVariants.heading} className="mb-2">
             Sharpening
           </Text>
@@ -57,7 +57,7 @@ export default function DetailsPanel({
       )}
 
       {adjustmentVisibility.presence !== false && (
-        <div className="p-2 bg-bg-tertiary rounded-md">
+        <div className="bg-bg-tertiary rounded-md">
           <Text variant={TextVariants.heading} className="mb-2">
             Presence
           </Text>

src/components/adjustments/Effects.tsx

@@ -46,7 +46,7 @@ export default function EffectsPanel({
 
   return (
     <div className="space-y-4">
-      <div className="p-2 bg-bg-tertiary rounded-md">
+      <div className="bg-bg-tertiary rounded-md">
         <Text variant={TextVariants.heading} className="mb-2">
           Creative
         </Text>
@@ -85,8 +85,8 @@ export default function EffectsPanel({
       </div>
 
       {!isForMask && (
-        <div className="space-y-4">
-          <div className="p-2 bg-bg-tertiary rounded-md">
+        <div className="space-y-8">
+          <div className="bg-bg-tertiary rounded-md">
             <Text variant={TextVariants.heading} className="mb-2">
               LUT
             </Text>
@@ -101,7 +101,7 @@ export default function EffectsPanel({
           </div>
 
           {adjustmentVisibility.vignette !== false && (
-            <div className="p-2 bg-bg-tertiary rounded-md">
+            <div className="bg-bg-tertiary rounded-md">
               <Text variant={TextVariants.heading} className="mb-2">
                 Vignette
               </Text>
@@ -149,7 +149,7 @@ export default function EffectsPanel({
           )}
 
           {adjustmentVisibility.grain !== false && (
-            <div className="p-2 bg-bg-tertiary rounded-md">
+            <div className="bg-bg-tertiary rounded-md">
               <Text variant={TextVariants.heading} className="mb-2">
                 Grain
               </Text>

src/components/panel/right/ControlsPanel.tsx

@@ -308,7 +308,7 @@ export default function Controls({ handleAutoAdjustments, handleLutSelect, setAd
         )}
       </AnimatePresence>
 
-      <div className="grow overflow-y-auto p-4 flex flex-col gap-2">
+      <div className="grow overflow-y-auto flex flex-col">
         {Object.keys(ADJUSTMENT_SECTIONS).map((sectionName: string) => {
           const SectionComponent: any = {
             basic: BasicAdjustments,

src/components/ui/CollapsibleSection.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useState } from 'react';
 import { ChevronDown, Eye, EyeOff } from 'lucide-react';
 import clsx from 'clsx';
 import Text from './Text';
@@ -25,35 +25,9 @@ export default function CollapsibleSection({
   onToggleVisibility = () => {},
   title,
 }: CollapsibleSectionProps) {
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [isHovering, setIsHovering] = useState(false);
   const hoverTimeoutRef = useRef<any>(null);
 
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    const content = contentRef.current;
-    if (!wrapper || !content) {
-      return;
-    }
-
-    const updateMaxHeight = () => {
-      if (isOpen) {
-        const contentHeight = content.scrollHeight;
-        wrapper.style.maxHeight = `${contentHeight}px`;
-      } else {
-        wrapper.style.maxHeight = '0px';
-      }
-    };
-
-    updateMaxHeight();
-
-    const resizeObserver = new ResizeObserver(updateMaxHeight);
-    resizeObserver.observe(content);
-
-    return () => resizeObserver.disconnect();
-  }, [isOpen]);
-
   const handleMouseEnter = () => {
     if (!canToggleVisibility) {
       return;
@@ -77,9 +51,9 @@ export default function CollapsibleSection({
   };
 
   return (
-    <div className="bg-surface rounded-lg overflow-hidden shrink-0" onContextMenu={onContextMenu}>
+    <div className="bg-surface overflow-hidden shrink-0" onContextMenu={onContextMenu}>
       <div
-        className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-card-active transition-colors duration-200"
+        className="bg-bg-secondary border-b-2 border-surface w-full pl-4 pr-3 py-2 flex items-center justify-between text-left hover:bg-card-active transition-colors duration-200"
         onClick={onToggle}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -108,15 +82,21 @@ export default function CollapsibleSection({
           size={20}
         />
       </div>
-      <div ref={wrapperRef} className="overflow-hidden transition-all duration-300 ease-in-out">
-        <div
-          className={clsx(
-            'px-4 pb-4 transition-opacity duration-300',
-            !isContentVisible && 'opacity-30 pointer-events-none',
-          )}
-          ref={contentRef}
-        >
-          {children}
+      <div
+        className={clsx(
+          'grid transition-[grid-template-rows] duration-300 ease-in-out',
+          isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div className="min-h-0 overflow-hidden">
+          <div
+            className={clsx(
+              'px-4 pt-4 pb-8 transition-opacity duration-300',
+              !isContentVisible && 'opacity-30 pointer-events-none',
+            )}
+          >
+            {children}
+          </div>
         </div>
       </div>
     </div>