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 -->

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({

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({

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}