From 4f6b7e253b56010ecfcee820bdb13ec48ab01db3 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 23 Aug 2026 21:55:39 +0100
Subject: [PATCH] Enhance Transition Effects in App.css and
 DashboardSidebarSplitter

- Updated transition timing functions in App.css for smoother animations, replacing 'ease-in-out' with a custom cubic-bezier curve.
- Increased the sidebar size transition duration in DashboardSidebarSplitter from 150ms to 300ms for improved user experience during resizing.
- Refactored transition properties for the dashboard splitter to ensure consistent animation behavior across components.
---
 assets/stylesheets/App.css                           | 12 ++++++------
 .../Dashboard/common/DashboardSidebarSplitter.jsx    |  9 ++-------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 13bbb657..e5bb2c97 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -505,7 +505,7 @@ body {
   max-width: 100% !important;
   flex: 0 0 100% !important;
   transition:
-    all 0.3s,
+    all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
     background 0s;
 }
 
@@ -1108,11 +1108,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 .farmcontrol-splitter.ant-splitter-horizontal.is-size-transitioning
   .ant-splitter-panel {
   transition:
-    --dashboard-splitter-sidebar-size 0.3s ease-in-out,
-    flex-basis 0.3s ease-in-out,
-    width 0.3s ease-in-out,
-    min-width 0.3s ease-in-out,
-    max-width 0.3s ease-in-out;
+    --dashboard-splitter-sidebar-size 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
+    flex-basis 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
+    width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
+    min-width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
+    max-width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
 }
 
 @property --dashboard-splitter-sidebar-size {
diff --git a/src/components/Dashboard/common/DashboardSidebarSplitter.jsx b/src/components/Dashboard/common/DashboardSidebarSplitter.jsx
index 43d83a4d..502c9f65 100644
--- a/src/components/Dashboard/common/DashboardSidebarSplitter.jsx
+++ b/src/components/Dashboard/common/DashboardSidebarSplitter.jsx
@@ -18,7 +18,7 @@ const MAX_SIDEBAR_PX = 400
 const COLLAPSED_WIDTH_PX = 80
 const ELECTRON_COLLAPSED_WIDTH_PX = 55
 const EXPAND_DRAG_PX = 10
-const SIZE_TRANSITION_MS = 150
+const SIZE_TRANSITION_MS = 300
 const COLLAPSE_STORAGE_KEY = 'DashboardSidebar_collapseState'
 const SIZE_STORAGE_KEY = 'DashboardSidebar_width'
 
@@ -264,12 +264,7 @@ const DashboardSidebarSplitter = ({ sidebar, children }) => {
       setSidebarSize(size)
       lastExpandedSizeRef.current = clampExpandedSize(size)
     },
-    [
-      collapseSidebar,
-      collapsedWidth,
-      expandSidebar,
-      lockResizeUntilPointerUp
-    ]
+    [collapseSidebar, collapsedWidth, expandSidebar, lockResizeUntilPointerUp]
   )
 
   const handleResizeEnd = useCallback(