fix: breadcrumb & show code button collision

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

@@ -18,7 +18,7 @@ import { decodeDesignerPathToArrayPath } from '../../utils/convertUtils/designer
 import { getFocusPath } from '../../utils/navigation';
 import { TreeLink } from '../../components/ProjectTree/types';
 
-import { breadcrumbClass } from './styles';
+import * as pageStyles from './styles';
 
 type BreadcrumbItem = {
   key: string;
@@ -171,16 +171,18 @@ const VisualPanelHeader: React.FC<VisualPanelHeaderProps> = React.memo((props) =
   const items = breadcrumbs.map(createBreadcrumbItem);
 
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between', height: '65px' }}>
-      <Breadcrumb
-        ariaLabel={formatMessage('Navigation Path')}
-        data-testid="Breadcrumb"
-        items={items}
-        maxDisplayedItems={3}
-        styles={breadcrumbClass}
-        onReduceData={() => undefined}
-      />
-      <div style={{ padding: '10px' }}>
+    <div css={pageStyles.visualPanelHeaderContainer}>
+      <div css={pageStyles.visualPanelHeaderLeft}>
+        <Breadcrumb
+          ariaLabel={formatMessage('Navigation Path')}
+          data-testid="Breadcrumb"
+          items={items}
+          maxDisplayedItems={3}
+          styles={pageStyles.breadcrumbClass}
+          onReduceData={() => undefined}
+        />
+      </div>
+      <div css={pageStyles.visualPanelHeaderRight}>
         <ActionButton onClick={onShowCodeClick}>
           {showCode ? formatMessage('Hide code') : formatMessage('Show code')}
         </ActionButton>

Composer/packages/client/src/pages/design/styles.ts

@@ -103,9 +103,23 @@ export const formEditor = css`
   min-width: 300px;
 `;
 
+export const visualPanelHeaderContainer = css`
+  height: 65px;
+`;
+
+export const visualPanelHeaderLeft = css`
+  overflow: hidden;
+  float: left;
+  width: calc(100% - 100px);
+`;
+
+export const visualPanelHeaderRight = css`
+  float: right;
+  line-height: 65px;
+`;
+
 export const breadcrumbClass = mergeStyleSets({
   root: {
-    width: '500px',
     margin: '0',
     padding: '10px',
   },