From 0f472034273d9efb9a847fdd65f4ea78e4fe14c7 Mon Sep 17 00:00:00 2001
From: Floh <48927090+Flohhhhh@users.noreply.github.com>
Date: Sat, 18 Apr 2026 15:35:51 -0400
Subject: [PATCH 1/3] ui: tighten right panel adjustments spacing

Reduce vertical padding in collapsible sections and align adjustment
tabs (Color, Curves, Details, Effects) with the controls panel layout.

Made-with: Cursor
---
 src/components/adjustments/Color.tsx         | 41 ++++++--------
 src/components/adjustments/Curves.tsx        | 18 +++---
 src/components/adjustments/Details.tsx       |  6 +-
 src/components/adjustments/Effects.tsx       | 10 ++--
 src/components/panel/right/ControlsPanel.tsx |  9 ++-
 src/components/ui/CollapsibleSection.tsx     | 58 +++++++-------------
 6 files changed, 57 insertions(+), 85 deletions(-)

diff --git a/src/components/adjustments/Color.tsx b/src/components/adjustments/Color.tsx
index ae8733fab..8ec6752ad 100644
--- a/src/components/adjustments/Color.tsx
+++ b/src/components/adjustments/Color.tsx
@@ -87,9 +87,8 @@ const ColorSwatch = ({ color, name, isActive, onClick }: ColorSwatchProps) => {
       onTouchEnd={handleMouseUp}
     >
       <div
-        className={`absolute inset-0 rounded-full border-2 transition-all duration-200 ease-out ${
-          isActive ? 'border-white opacity-100' : 'scale-100 border-transparent opacity-0'
-        }`}
+        className={`absolute inset-0 rounded-full border-2 transition-all duration-200 ease-out ${isActive ? 'border-white opacity-100' : 'scale-100 border-transparent opacity-0'
+          }`}
         style={{
           transform: isActive ? (isPressed ? 'scale(1.1)' : 'scale(1.25)') : undefined,
           transition: isPressed
@@ -99,9 +98,8 @@ const ColorSwatch = ({ color, name, isActive, onClick }: ColorSwatchProps) => {
       />
 
       <div
-        className={`absolute inset-0 rounded-full transition-all duration-150 ease-out ${
-          isActive ? 'shadow-lg' : 'shadow-md'
-        }`}
+        className={`absolute inset-0 rounded-full transition-all duration-150 ease-out ${isActive ? 'shadow-lg' : 'shadow-md'
+          }`}
         style={{
           backgroundColor: color,
           transform: getTransform(),
@@ -158,7 +156,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 (
@@ -166,10 +164,9 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
               key={tab.id}
               onClick={() => setActiveTab(tab.id as '3way' | 'global')}
               className={`w-7 h-7 rounded-full flex items-center justify-center transition-all focus:outline-none
-                ${
-                  isActive
-                    ? 'ring-2 ring-offset-2 ring-offset-surface ring-accent text-text-primary'
-                    : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
+                ${isActive
+                  ? 'ring-2 ring-offset-2 ring-offset-surface ring-accent text-text-primary'
+                  : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
                 }`}
             >
               {tab.icon}
@@ -182,10 +179,9 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
         <button
           onClick={() => setIsExpanded(!isExpanded)}
           className={`w-7 h-7 rounded-full flex items-center justify-center transition-all focus:outline-none
-            ${
-              isExpanded
-                ? 'bg-accent text-button-text'
-                : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
+            ${isExpanded
+              ? 'bg-accent text-button-text'
+              : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
             }`}
           data-tooltip="Toggle Sliders"
         >
@@ -193,7 +189,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
@@ -422,15 +418,14 @@ 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 && (
             <button
               onClick={toggleWbPicker}
-              className={`p-1.5 rounded-md transition-colors ${
-                isWbPickerActive ? 'bg-accent text-button-text' : 'hover:bg-bg-secondary text-text-secondary'
-              }`}
+              className={`p-1.5 rounded-md transition-colors ${isWbPickerActive ? 'bg-accent text-button-text' : 'hover:bg-bg-secondary text-text-secondary'
+                }`}
               data-tooltip="White Balance Picker"
             >
               <Pipette size={16} />
@@ -459,7 +454,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>
@@ -483,7 +478,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>
@@ -495,7 +490,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>
diff --git a/src/components/adjustments/Curves.tsx b/src/components/adjustments/Curves.tsx
index 6a52b06a7..ed397218f 100644
--- a/src/components/adjustments/Curves.tsx
+++ b/src/components/adjustments/Curves.tsx
@@ -97,9 +97,8 @@ function getCurvePath(points: Array<Coord>) {
     const cp2x = p1.x - dx / 3.0;
     const cp2y = p1.y - (m1 * dx) / 3.0;
 
-    path += ` C ${cp1x.toFixed(2)} ${255 - Number(cp1y.toFixed(2))}, ${cp2x.toFixed(2)} ${
-      255 - Number(cp2y.toFixed(2))
-    }, ${p1.x} ${255 - p1.y}`;
+    path += ` C ${cp1x.toFixed(2)} ${255 - Number(cp1y.toFixed(2))}, ${cp2x.toFixed(2)} ${255 - Number(cp2y.toFixed(2))
+      }, ${p1.x} ${255 - p1.y}`;
   }
 
   if (points[n - 1].x < 255) {
@@ -326,7 +325,7 @@ export default function CurveGraph({
 
   const handlePointStart = (e: any, index: number) => {
     if (e.button === 2) return;
-    
+
     if (!e.touches) e.preventDefault();
     e.stopPropagation();
 
@@ -485,17 +484,16 @@ export default function CurveGraph({
   };
 
   return (
-    <div className="select-none touch-none" ref={containerRef}>
-      <div className="flex items-center justify-between gap-1 mb-2 mt-2">
+    <div className="select-none touch-none px-1" ref={containerRef}>
+      <div className="flex items-center justify-between gap-1 mb-6 mt-2">
         <div className="flex items-center gap-1">
           {Object.keys(channelConfig).map((channel: any) => (
             <button
               className={`w-7 h-7 rounded-full flex items-center justify-center transition-all
-              ${
-                activeChannel === channel
+              ${activeChannel === channel
                   ? 'ring-2 ring-offset-2 ring-offset-surface ring-accent'
                   : 'bg-surface-secondary'
-              }
+                }
               ${channel === ActiveChannel.Luma ? 'text-text-primary' : ''}`}
               key={channel}
               onClick={() => setActiveChannel(channel as ActiveChannel)}
@@ -515,7 +513,7 @@ export default function CurveGraph({
       </div>
 
       <div
-        className="w-full aspect-square bg-surface-secondary p-1 rounded-md relative touch-none"
+        className="w-full aspect-square bg-bg-primary relative touch-none"
         onMouseDown={handleContainerStart}
         onTouchStart={handleContainerStart}
         onDoubleClick={handleDoubleClick}
diff --git a/src/components/adjustments/Details.tsx b/src/components/adjustments/Details.tsx
index 32852cb81..6013060d0 100644
--- a/src/components/adjustments/Details.tsx
+++ b/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>
@@ -46,7 +46,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>
diff --git a/src/components/adjustments/Effects.tsx b/src/components/adjustments/Effects.tsx
index e680a8fda..3b8433389 100644
--- a/src/components/adjustments/Effects.tsx
+++ b/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>
diff --git a/src/components/panel/right/ControlsPanel.tsx b/src/components/panel/right/ControlsPanel.tsx
index 6cf19a9c1..9623e7b5b 100644
--- a/src/components/panel/right/ControlsPanel.tsx
+++ b/src/components/panel/right/ControlsPanel.tsx
@@ -178,9 +178,8 @@ export default function Controls({
 
     const isPasteAllowed = copiedSectionAdjustments && copiedSectionAdjustments.section === sectionName;
     const pasteLabel = copiedSectionAdjustments
-      ? `Paste ${
-          copiedSectionAdjustments.section.charAt(0).toUpperCase() + copiedSectionAdjustments.section.slice(1)
-        } Settings`
+      ? `Paste ${copiedSectionAdjustments.section.charAt(0).toUpperCase() + copiedSectionAdjustments.section.slice(1)
+      } Settings`
       : 'Paste Settings';
 
     const options: Array<ControlsPanelOption> = [
@@ -249,7 +248,7 @@ export default function Controls({
                 waveformData={waveform || null}
                 histogram={histogram}
                 displayMode={activeWaveformChannel || 'luma'}
-                setDisplayMode={setActiveWaveformChannel || (() => {})}
+                setDisplayMode={setActiveWaveformChannel || (() => { })}
                 showClipping={adjustments.showClipping || false}
                 onToggleClipping={() => {
                   setAdjustments((prev: Adjustments) => ({
@@ -265,7 +264,7 @@ export default function Controls({
         )}
       </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,
diff --git a/src/components/ui/CollapsibleSection.tsx b/src/components/ui/CollapsibleSection.tsx
index e01e49fcd..dbbabccc6 100644
--- a/src/components/ui/CollapsibleSection.tsx
+++ b/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';
@@ -22,38 +22,12 @@ export default function CollapsibleSection({
   isOpen,
   onContextMenu,
   onToggle,
-  onToggleVisibility = () => {},
+  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>

From 6a097800d09f9adbf9c434513eb051b258d98c1b Mon Sep 17 00:00:00 2001
From: Floh <48927090+Flohhhhh@users.noreply.github.com>
Date: Wed, 29 Apr 2026 07:54:07 -0400
Subject: [PATCH 2/3] Undo no-op code formatting changes

---
 src/components/adjustments/Color.tsx         | 24 ++++++++++++--------
 src/components/adjustments/Curves.tsx        |  5 ++--
 src/components/panel/right/ControlsPanel.tsx |  7 +++---
 src/components/ui/CollapsibleSection.tsx     |  2 +-
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/adjustments/Color.tsx b/src/components/adjustments/Color.tsx
index bd2076eb0..391992085 100644
--- a/src/components/adjustments/Color.tsx
+++ b/src/components/adjustments/Color.tsx
@@ -87,8 +87,9 @@ const ColorSwatch = ({ color, name, isActive, onClick }: ColorSwatchProps) => {
       onTouchEnd={handleMouseUp}
     >
       <div
-        className={`absolute inset-0 rounded-full border-2 transition-all duration-200 ease-out ${isActive ? 'border-white opacity-100' : 'scale-100 border-transparent opacity-0'
-          }`}
+        className={`absolute inset-0 rounded-full border-2 transition-all duration-200 ease-out ${
+          isActive ? 'border-white opacity-100' : 'scale-100 border-transparent opacity-0'
+        }`}
         style={{
           transform: isActive ? (isPressed ? 'scale(1.1)' : 'scale(1.25)') : undefined,
           transition: isPressed
@@ -98,8 +99,9 @@ const ColorSwatch = ({ color, name, isActive, onClick }: ColorSwatchProps) => {
       />
 
       <div
-        className={`absolute inset-0 rounded-full transition-all duration-150 ease-out ${isActive ? 'shadow-lg' : 'shadow-md'
-          }`}
+        className={`absolute inset-0 rounded-full transition-all duration-150 ease-out ${
+          isActive ? 'shadow-lg' : 'shadow-md'
+        }`}
         style={{
           backgroundColor: color,
           transform: getTransform(),
@@ -164,9 +166,10 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
               key={tab.id}
               onClick={() => setActiveTab(tab.id as '3way' | 'global')}
               className={`w-7 h-7 rounded-full flex items-center justify-center transition-all focus:outline-none
-                ${isActive
-                  ? 'ring-2 ring-offset-2 ring-offset-surface ring-accent text-text-primary'
-                  : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
+                ${
+                  isActive
+                    ? 'ring-2 ring-offset-2 ring-offset-surface ring-accent text-text-primary'
+                    : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
                 }`}
             >
               {tab.icon}
@@ -179,9 +182,10 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
         <button
           onClick={() => setIsExpanded(!isExpanded)}
           className={`w-7 h-7 rounded-full flex items-center justify-center transition-all focus:outline-none
-            ${isExpanded
-              ? 'bg-accent text-button-text'
-              : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
+            ${
+              isExpanded
+                ? 'bg-accent text-button-text'
+                : 'bg-bg-secondary text-text-secondary hover:text-text-primary hover:bg-bg-secondary/80'
             }`}
           data-tooltip="Toggle Sliders"
         >
diff --git a/src/components/adjustments/Curves.tsx b/src/components/adjustments/Curves.tsx
index cf0910433..8a781e502 100644
--- a/src/components/adjustments/Curves.tsx
+++ b/src/components/adjustments/Curves.tsx
@@ -177,8 +177,9 @@ function getCurvePath(points: Array<Coord>) {
     const cp2x = p1.x - dx / 3.0;
     const cp2y = p1.y - (m1 * dx) / 3.0;
 
-    path += ` C ${cp1x.toFixed(2)} ${255 - Number(cp1y.toFixed(2))}, ${cp2x.toFixed(2)} ${255 - Number(cp2y.toFixed(2))
-      }, ${p1.x} ${255 - p1.y}`;
+    path += ` C ${cp1x.toFixed(2)} ${255 - Number(cp1y.toFixed(2))}, ${cp2x.toFixed(2)} ${
+      255 - Number(cp2y.toFixed(2))
+    }, ${p1.x} ${255 - p1.y}`;
   }
 
   if (points[n - 1].x < 255) {
diff --git a/src/components/panel/right/ControlsPanel.tsx b/src/components/panel/right/ControlsPanel.tsx
index ef31c4d5c..2ad137259 100644
--- a/src/components/panel/right/ControlsPanel.tsx
+++ b/src/components/panel/right/ControlsPanel.tsx
@@ -197,8 +197,9 @@ export default function Controls({
 
     const isPasteAllowed = copiedSectionAdjustments && copiedSectionAdjustments.section === sectionName;
     const pasteLabel = copiedSectionAdjustments
-      ? `Paste ${copiedSectionAdjustments.section.charAt(0).toUpperCase() + copiedSectionAdjustments.section.slice(1)
-      } Settings`
+      ? `Paste ${
+          copiedSectionAdjustments.section.charAt(0).toUpperCase() + copiedSectionAdjustments.section.slice(1)
+        } Settings`
       : 'Paste Settings';
 
     const options: Array<ControlsPanelOption> = [
@@ -267,7 +268,7 @@ export default function Controls({
                 waveformData={waveform || null}
                 histogram={histogram}
                 displayMode={activeWaveformChannel || 'luma'}
-                setDisplayMode={setActiveWaveformChannel || (() => { })}
+                setDisplayMode={setActiveWaveformChannel || (() => {})}
                 showClipping={adjustments.showClipping || false}
                 onToggleClipping={() => {
                   setAdjustments((prev: Adjustments) => ({
diff --git a/src/components/ui/CollapsibleSection.tsx b/src/components/ui/CollapsibleSection.tsx
index dbbabccc6..6dfc9351e 100644
--- a/src/components/ui/CollapsibleSection.tsx
+++ b/src/components/ui/CollapsibleSection.tsx
@@ -22,7 +22,7 @@ export default function CollapsibleSection({
   isOpen,
   onContextMenu,
   onToggle,
-  onToggleVisibility = () => { },
+  onToggleVisibility = () => {},
   title,
 }: CollapsibleSectionProps) {
   const [isHovering, setIsHovering] = useState(false);

From 2735095c09f51ebe366cc9e6fd8b4c2217f4d3e0 Mon Sep 17 00:00:00 2001
From: Floh <48927090+Flohhhhh@users.noreply.github.com>
Date: Mon, 4 May 2026 16:26:46 -0400
Subject: [PATCH 3/3] fix calibration section

---
 src/components/adjustments/Color.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/adjustments/Color.tsx b/src/components/adjustments/Color.tsx
index 391992085..0c9dd8b59 100644
--- a/src/components/adjustments/Color.tsx
+++ b/src/components/adjustments/Color.tsx
@@ -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>