diff --git a/packages/designer/src/toolbar/mode-switch.tsx b/packages/designer/src/toolbar/mode-switch.tsx
index e92342a..8d114b4 100644
--- a/packages/designer/src/toolbar/mode-switch.tsx
+++ b/packages/designer/src/toolbar/mode-switch.tsx
@@ -9,7 +9,7 @@ export const ModeSwitchTool = observer(() => {
   const designer = useDesigner();
 
   return (
-    <Group attached>
+    <Group attached whiteSpace="nowrap">
       <ToggleButton
         shape="ghost"
         selected={designer.activeView === 'design'}
diff --git a/packages/designer/src/toolbar/route-switch.tsx b/packages/designer/src/toolbar/route-switch.tsx
index 8133c94..049c5eb 100644
--- a/packages/designer/src/toolbar/route-switch.tsx
+++ b/packages/designer/src/toolbar/route-switch.tsx
@@ -47,11 +47,14 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
     setVisible(false);
   };
 
-  const current = optionMap[value];
+  const pathname = value?.split?.('?')[0];
+  const current = optionMap[pathname];
   return (
     <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}