diff --git a/packages/designer/src/toolbar/route-switch.tsx b/packages/designer/src/toolbar/route-switch.tsx
index 369485f..049c5eb 100644
--- a/packages/designer/src/toolbar/route-switch.tsx
+++ b/packages/designer/src/toolbar/route-switch.tsx
@@ -53,6 +53,8 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
     <ToggleButton
       shape="ghost"
       minWidth={100}
+      maxWidth={200}
+      textAlign="left"
       dropdownProps={{
         open: visible,
         onOpenChange: setVisible,
diff --git a/packages/ui/src/toggle-button.tsx b/packages/ui/src/toggle-button.tsx
index c36b524..f41df79 100644
--- a/packages/ui/src/toggle-button.tsx
+++ b/packages/ui/src/toggle-button.tsx
@@ -12,6 +12,7 @@ const buttonStyle = css`
   cursor: pointer;
   color: var(--tango-colors-gray-50);
   padding: 0 8px;
+  white-space: nowrap;
 
   .anticon-down {
     width: 10px;
@@ -201,7 +202,8 @@ export function ToggleButton(props: ToggleButtonProps) {
 
   let btn = (
     <Button css={buttonStyle} className={clazz} type="button" {...rest}>
-      <Box as="span">
+      {/* @ts-ignore textOverflow is available */}
+      <Box as="span" flex="1" overflow="hidden" textOverflow="ellipsis">
         {icon && (
           <Box as="span" className="buttonIcon" mr="s">
             {icon}