fix: breadcrumb resizing issue

Composer/packages/client/__tests__/pages/design/Design.test.tsx

@@ -16,9 +16,6 @@ import { undoFunctionState } from '../../../src/recoilModel/undo/history';
 import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 import DesignPage from '../../../src/pages/design/DesignPage';
 import { SAMPLE_DIALOG } from '../../mocks/sampleDialog';
-import ResizeObserver from '../../mocks/ResizeObserver';
-
-(global as any).ResizeObserver = ResizeObserver;
 
 const projectId = '12345.6789';
 const dialogId = SAMPLE_DIALOG.id;

Composer/packages/client/src/pages/design/VisualPanelHeader.tsx

@@ -17,7 +17,6 @@ import { getDialogData } from '../../utils/dialogUtil';
 import { decodeDesignerPathToArrayPath } from '../../utils/convertUtils/designerPathEncoder';
 import { getFocusPath } from '../../utils/navigation';
 import { TreeLink } from '../../components/ProjectTree/types';
-import { useResizeObserver } from '../../hooks/useResizeObserver';
 
 import * as pageStyles from './styles';
 
@@ -156,40 +155,12 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => {
   }, [currentDialog?.content, initialBreadcrumbArray]);
   return breadcrumbArray;
 };
-const defaultToggleButtonWidth = 100;
-const spaceBetweenContainers = 6;
+
 const VisualPanelHeader: React.FC<VisualPanelHeaderProps> = React.memo((props) => {
   const { showCode, projectId, onShowCodeClick, pluginConfig } = props;
 
   const breadcrumbs = useBreadcrumbs(projectId, pluginConfig);
 
-  const toggleButtonContainerRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  const [toggleButtonWidth, setToggleButtonWidth] = React.useState(defaultToggleButtonWidth);
-  const [breadcrumbContainerWidth, setBreadcrumbContainerWidth] = React.useState<number | string>(
-    `calc(100% - ${toggleButtonWidth}px)`
-  );
-
-  // Set the width of the toggle button based on its text (locale)
-  React.useEffect(() => {
-    if (toggleButtonContainerRef.current) {
-      const toggleButton = toggleButtonContainerRef.current.querySelector<HTMLButtonElement>('button');
-      if (toggleButton) {
-        const { width } = toggleButton?.getBoundingClientRect();
-        setToggleButtonWidth(width);
-      }
-    }
-  }, []);
-
-  // Observe width changes of the container to re-set the available width for breadcrumb container
-  useResizeObserver<HTMLDivElement>(containerRef.current, (entries) => {
-    if (entries.length) {
-      const { width } = entries[0].contentRect;
-      setBreadcrumbContainerWidth(width - toggleButtonWidth - spaceBetweenContainers);
-    }
-  });
-
   const createBreadcrumbItem: (breadcrumb: BreadcrumbItem) => IBreadcrumbItem = (breadcrumb: BreadcrumbItem) => {
     return {
       key: breadcrumb.key,
@@ -201,16 +172,16 @@ const VisualPanelHeader: React.FC<VisualPanelHeaderProps> = React.memo((props) =
   const items = breadcrumbs.map(createBreadcrumbItem);
 
   return (
-    <div ref={containerRef} css={pageStyles.visualPanelHeaderContainer}>
-      <div style={{ width: breadcrumbContainerWidth }}>
+    <div css={pageStyles.visualPanelHeaderContainer}>
+      <div style={{ width: '85%' }}>
         <Breadcrumb
           ariaLabel={formatMessage('Navigation Path')}
           data-testid="Breadcrumb"
           items={items}
           styles={pageStyles.breadcrumbClass}
         />
       </div>
-      <div ref={toggleButtonContainerRef} css={pageStyles.visualPanelHeaderShowCodeButton}>
+      <div css={pageStyles.visualPanelHeaderShowCodeButton}>
         <ActionButton onClick={onShowCodeClick}>
           {showCode ? formatMessage('Hide code') : formatMessage('Show code')}
         </ActionButton>