fix: status sheet buttons and height adjustment (#303)

packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx

@@ -258,7 +258,7 @@ export const LayoutControls = () => {
         </Select>
       </ControlRowContainer>
       {layoutsWithHeightControls.includes(selectedLayoutId) ? (
-        <CardRowContainer sx={{ padding: 0 }}>
+        <CardRowContainer sx={{ padding: 1 }}>
           <CardRowColumn>
             <label htmlFor={inputId}>{inputLabel[selectedLayoutId]}</label>
             {(heightValue && heightValue < defaultMaxHeight) || !heightValue ? (

packages/widget/src/components/AppContainer.tsx

@@ -6,6 +6,14 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { WidgetVariant } from '../types/widget.js';
 import { ElementId, createElementId } from '../utils/elements.js';
 
+// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
+//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
+//  A Number of other components and hooks work with height values that are often set on or derived from these elements
+//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
+//    - useTokenListHeight
+//    - useSetContentHeight
+//  Also check any code that is using the methods from elements.ts utils file
+
 export const AppExpandedContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme, variant }) => ({

packages/widget/src/hooks/useScrollableContainer.ts

@@ -1,12 +1,7 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
-import { ElementId, createElementId } from '../utils/elements.js';
+import { getScrollableContainer } from '../utils/elements.js';
 import { useDefaultElementId } from './useDefaultElementId.js';
 
-export const getScrollableContainer = (elementId: string) =>
-  document.getElementById(
-    createElementId(ElementId.ScrollableContainer, elementId),
-  );
-
 export const useGetScrollableContainer = () => {
   const elementId = useDefaultElementId();
   const getContainer = useCallback(

packages/widget/src/hooks/useSetContentHeight.ts

@@ -1,24 +1,28 @@
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect } from 'react';
+import { getRelativeContainer } from '../utils/elements.js';
 import { useDefaultElementId } from './useDefaultElementId.js';
-import { getScrollableContainer } from './useScrollableContainer.js';
+
+// NOTE: this hook is implicitly tied to the widget height functionality in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+//   CSS changes in those components can have implications for the functionality in this hook
 
 export const useSetContentHeight = (
   ref: MutableRefObject<HTMLElement | undefined>,
 ) => {
   const elementId = useDefaultElementId();
   useLayoutEffect(() => {
-    const scrollableContainer = getScrollableContainer(elementId);
+    const relativeContainer = getRelativeContainer(elementId);
     if (
-      !scrollableContainer ||
+      !relativeContainer ||
       !ref.current ||
-      ref.current?.clientHeight <= scrollableContainer?.clientHeight
+      ref.current?.clientHeight <= relativeContainer?.clientHeight
     ) {
       return;
     }
-    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+    relativeContainer.style.minHeight = `${ref.current.clientHeight}px`;
     return () => {
-      scrollableContainer.style.removeProperty('height');
+      relativeContainer.style.removeProperty('min-height');
     };
   }, [elementId, ref]);
 };

packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts

@@ -2,7 +2,12 @@ import { useTheme } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { ElementId, createElementId } from '../../utils/elements.js';
+import {
+  ElementId,
+  getAppContainer,
+  getHeaderElement,
+  getScrollableContainer,
+} from '../../utils/elements.js';
 
 const debounce = (func: Function, timeout = 300) => {
   let timer: ReturnType<typeof setTimeout>;
@@ -18,13 +23,9 @@ const getContentHeight = (
   elementId: string,
   listParentRef: MutableRefObject<HTMLUListElement | null>,
 ) => {
-  const containerElement = document.getElementById(
-    createElementId(ElementId.ScrollableContainer, elementId),
-  );
+  const containerElement = getScrollableContainer(elementId);
 
-  const headerElement = document.getElementById(
-    createElementId(ElementId.Header, elementId),
-  );
+  const headerElement = getHeaderElement(elementId);
 
   const listParentElement = listParentRef?.current;
 
@@ -63,6 +64,10 @@ interface UseContentHeightProps {
 export const minTokenListHeight = 360;
 export const minMobileTokenListHeight = 160;
 
+// NOTE: this hook is implicitly tied to the widget height functionality in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+//   CSS changes in those components can have implications for the functionality in this hook
+
 export const useTokenListHeight = ({
   listParentRef,
   headerRef,
@@ -81,9 +86,7 @@ export const useTokenListHeight = ({
     // calling this on initial mount prevents the lists resizing appearing glitchy
     handleResize();
 
-    const appContainer = document.getElementById(
-      createElementId(ElementId.AppExpandedContainer, elementId),
-    );
+    const appContainer = getAppContainer(elementId);
 
     let resizeObserver: ResizeObserver;
     if (appContainer) {

packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -301,7 +301,12 @@ export const StatusBottomSheetContent: React.FC<
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : null}
       {VcComponent ? <VcComponent route={route} /> : null}
-      <Box mt={2}>
+      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
+        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+          <Button variant="text" onClick={handleSeeDetails} fullWidth>
+            {t('button.seeDetails')}
+          </Button>
+        ) : null}
         <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
           {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
           {hasEnumFlag(status, RouteExecutionStatus.Done)
@@ -312,13 +317,6 @@ export const StatusBottomSheetContent: React.FC<
             : null}
         </Button>
       </Box>
-      {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-        <Box mt={2}>
-          <Button variant="text" onClick={handleSeeDetails} fullWidth>
-            {t('button.seeDetails')}
-          </Button>
-        </Box>
-      ) : null}
     </Box>
   );
 };

packages/widget/src/utils/elements.ts

@@ -8,3 +8,24 @@ export enum ElementId {
 
 export const createElementId = (ElementId: ElementId, elementId: string) =>
   elementId ? `${ElementId}-${elementId}` : ElementId;
+
+// NOTE: The getter functions here are often used with code that can be effected by css changes in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+
+export const getAppContainer = (elementId: string) =>
+  document.getElementById(
+    createElementId(ElementId.AppExpandedContainer, elementId),
+  );
+
+export const getRelativeContainer = (elementId: string) =>
+  document.getElementById(
+    createElementId(ElementId.RelativeContainer, elementId),
+  );
+
+export const getScrollableContainer = (elementId: string) =>
+  document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId),
+  );
+
+export const getHeaderElement = (elementId: string) =>
+  document.getElementById(createElementId(ElementId.Header, elementId));