breadcrumb navigation padding and adjust popover offset values

EasyPost · Dec 20, 2024 · b71f686 · b71f686
1 parent 098ed94
commit b71f686
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/easy-ui-react/src/ForgeLayout/ForgeLayoutControls.module.scss b/easy-ui-react/src/ForgeLayout/ForgeLayoutControls.module.scss
@@ -11,6 +11,7 @@
 .breadcrumbNavigationContainer {
   border: design-token("shape.border_width.1") solid
     theme-token("color.neutral.300");
+  padding-right: design-token("space.3");
   display: inline-flex;
   z-index: 1;
 }
@@ -62,7 +63,7 @@
   border: design-token("shape.border_width.1") solid
     theme-token("color.neutral.300");
   border-radius: design-token("shape.border_radius.md");
-  background-color: white;
+  background-color: theme-token("color.neutral.000");
   padding: design-token("space.2");
   box-shadow: design-token("shadow.overlay");
 }

diff --git a/easy-ui-react/src/ForgeLayout/ForgeLayoutControls.tsx b/easy-ui-react/src/ForgeLayout/ForgeLayoutControls.tsx
@@ -27,6 +27,9 @@ import styles from "./ForgeLayoutControls.module.scss";
 const TEST_MODE = "Test";
 const PRODUCTION_MODE = "Production";
 
+const POPOVER_CROSS_OFFSET = 116;
+const POPOVER_OFFSET = 2;
+
 export type ForgeLayoutControlsProps = {
   /** Controls children. */
   children: ReactNode;
@@ -48,10 +51,6 @@ export function ForgeLayoutControls(props: ForgeLayoutControlsProps) {
     return null;
   }
 
-  if (areControlsGrouped) {
-    return <div className={styles.controls}>{children}</div>;
-  }
-
   return (
     <>
       {areControlsGrouped ? (
@@ -187,8 +186,8 @@ export function ForgeLayoutModeSwitcher(props: ForgeLayoutModeSwitcherProps) {
       </Button>
       <Popover
         className={styles.popover}
-        offset={2}
-        crossOffset={102}
+        offset={POPOVER_OFFSET}
+        crossOffset={POPOVER_CROSS_OFFSET}
         isOpen={isOpen}
         onOpenChange={setIsOpen}
       >