fix: right panel transition is now smoother

transition duration is now set via a function for integration testing  purposes

ts/components/conversation/right-panel/RightPanel.tsx

@@ -9,23 +9,18 @@ import { OverlayMessageInfo } from './overlay/message-info/OverlayMessageInfo';
 export const StyledRightPanelContainer = styled.div`
   position: absolute;
   height: var(--right-panel-height);
+  width: var(--right-panel-width);
   right: 0vw;
 
-  transition: transform 0.3s ease-in-out;
+  transition: transform var(--right-panel-duration) linear;
   transform: translateX(100%);
-  will-change: transform;
-  width: var(--right-panel-width);
-  z-index: 5;
+  z-index: 3;
 
   background-color: var(--background-primary-color);
   border-left: 1px solid var(--border-color);
-  visibility: hidden;
 
   &.show {
-    transform: none;
-    transition: transform 0.3s ease-in-out;
-    z-index: 3;
-    visibility: visible;
+    transform: translateX(0);
   }
 `;
 

ts/themes/globals.tsx

@@ -2,6 +2,10 @@ import { isTestIntegration } from '../shared/env_vars';
 import { hexColorToRGB } from '../util/hexColorToRGB';
 import { COLORS } from './constants/colors';
 
+function setDuration(duration: number | string) {
+  return `${!isTestIntegration() ? duration : typeof duration === 'string' ? '0s' : '0'}`;
+}
+
 // These variables are independent of the current theme
 export type ThemeGlobals = {
   /* Fonts */
@@ -94,6 +98,7 @@ export type ThemeGlobals = {
   '--right-panel-height': string;
   '--right-panel-attachment-width': string;
   '--right-panel-attachment-height': string;
+  '--right-panel-duration': string;
 };
 
 // These are only set once in the global style (at root).
@@ -130,8 +135,8 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--composition-container-height': '60px',
   '--search-input-height': '34px',
 
-  '--default-duration': isTestIntegration() ? '0s' : '0.25s',
-  '--default-duration-seconds': isTestIntegration() ? '0' : '0.25', // framer-motion requires a number
+  '--default-duration': setDuration('0.25s'),
+  '--default-duration-seconds': setDuration(0.25), // framer-motion requires a number
 
   '--green-color': COLORS.PRIMARY.GREEN,
   '--blue-color': COLORS.PRIMARY.BLUE,
@@ -170,6 +175,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
   '--right-panel-attachment-height':
     'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)',
+  '--right-panel-duration': setDuration('0.3s'),
 };
 
 // These should only be needed for the global style (at root).