fix edit button position

chili-publish · Nov 18, 2024 · 3eca866 · 3eca866
1 parent 9c3ff41
commit 3eca866
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/MainContent.tsx b/src/MainContent.tsx
@@ -331,6 +331,7 @@ function MainContent({ projectConfig, authToken, updateToken: setAuthToken }: Ma
                                     {isMobileSize && (
                                         <MobileVariablesTray
                                             variables={variables}
+                                            isTimelineDisplayed={layoutIntent === LayoutIntent.digitalAnimated}
                                             isDocumentLoaded={isDocumentLoaded}
                                         />
                                     )}

diff --git a/src/components/variables/MobileVariablesTray.tsx b/src/components/variables/MobileVariablesTray.tsx
@@ -27,6 +27,7 @@ import { getDataTestIdForSUI } from '../../utils/dataIds';
 
 interface VariablesPanelProps {
     variables: Variable[];
+    isTimelineDisplayed?: boolean;
     isDocumentLoaded: boolean;
 }
 
@@ -38,7 +39,7 @@ const imagePanelHeight = `
     )`;
 
 function MobileVariablesPanel(props: VariablesPanelProps) {
-    const { variables, isDocumentLoaded } = props;
+    const { variables, isDocumentLoaded, isTimelineDisplayed } = props;
     const { panel } = useTheme();
 
     const { contentType, showVariablesPanel, showDataSourcePanel } = useVariablePanelContext();
@@ -93,7 +94,7 @@ function MobileVariablesPanel(props: VariablesPanelProps) {
 
     return (
         <>
-            <EditButtonWrapper>
+            <EditButtonWrapper isTimelineDisplayed={isTimelineDisplayed}>
                 <Button
                     dataTestId={getDataTestIdForSUI('mobile-variables')}
                     variant={ButtonVariant.primary}

diff --git a/src/components/variables/VariablesPanel.styles.ts b/src/components/variables/VariablesPanel.styles.ts
@@ -1,10 +1,10 @@
 import { Colors, FontSizes, ITheme } from '@chili-publish/grafx-shared-components';
 import styled from 'styled-components';
 
-export const EditButtonWrapper = styled.div`
+export const EditButtonWrapper = styled.div<{ isTimelineDisplayed?: boolean }>`
     position: fixed;
     left: 2rem;
-    bottom: 6.5rem;
+    bottom: ${({ isTimelineDisplayed }) => (isTimelineDisplayed ? '6.5rem' : '2.5rem')};
 `;
 
 export const VariablesContainer = styled.div<{ height?: string }>`