From 5c45c66ce8332164bd5ddfdf509a25dc35828557 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Fri, 27 Jun 2025 15:47:55 +0800
Subject: [PATCH] fix(core): correct workspace selector position in sidebar
 fallback (#12945)

- prevent drag-handle being clipped in header

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Reduced horizontal padding and header height in the app sidebar
fallback view for a more compact layout.
* Updated header padding in the workbench view and introduced
conditional left padding based on sidebar switch visibility.

* **Refactor**
* Simplified and centralized the logic for displaying the sidebar
switch, improving code clarity and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../core/src/modules/app-sidebar/views/fallback.css.ts   | 4 ++--
 .../src/modules/workbench/view/route-container.css.ts    | 7 ++++++-
 .../core/src/modules/workbench/view/route-container.tsx  | 9 +++++++--
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/core/src/modules/app-sidebar/views/fallback.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/fallback.css.ts
index 2992c94456..d2415414fa 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/fallback.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/fallback.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 export const fallback = style({
-  padding: '4px 16px',
+  padding: '4px 8px',
   height: '100%',
   overflow: 'clip',
 });
@@ -13,7 +13,7 @@ export const fallbackHeader = style({
   flexDirection: 'row',
   gap: '8px',
   overflow: 'hidden',
-  height: '52px',
+  height: '42px',
 });
 
 export const spacer = style({
diff --git a/packages/frontend/core/src/modules/workbench/view/route-container.css.ts b/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
index d85dd2ae16..7a5b44db0b 100644
--- a/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
+++ b/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
@@ -19,13 +19,18 @@ export const header = style({
   alignItems: 'center',
   flexShrink: 0,
   background: cssVar('backgroundPrimaryColor'),
-  padding: '0 16px 0px 8px',
+  padding: '0 16px',
   contain: 'strict',
   '@media': {
     print: {
       display: 'none',
     },
   },
+  selectors: {
+    '&[data-show-switch=true]': {
+      paddingLeft: 8,
+    },
+  },
 });
 
 export const viewBodyContainer = style({
diff --git a/packages/frontend/core/src/modules/workbench/view/route-container.tsx b/packages/frontend/core/src/modules/workbench/view/route-container.tsx
index 4ecbbe13c5..85a2c33351 100644
--- a/packages/frontend/core/src/modules/workbench/view/route-container.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/route-container.tsx
@@ -52,10 +52,15 @@ export const RouteContainer = () => {
     workbench.toggleSidebar();
   }, [workbench]);
 
+  const showSwitch = !BUILD_CONFIG.isElectron && viewPosition.isFirst;
+
   return (
     <div className={styles.root}>
-      <div className={styles.header}>
-        {!BUILD_CONFIG.isElectron && viewPosition.isFirst && (
+      <div
+        className={styles.header}
+        data-show-switch={showSwitch && !leftSidebarOpen}
+      >
+        {showSwitch && (
           <SidebarSwitch
             show={!leftSidebarOpen}
             className={styles.leftSidebarButton}