style(core): adjust app sidebar style (#12852)

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

## Summary by CodeRabbit

- **Style**
- Adjusted layout and spacing in sidebar and quick search components for
a more compact appearance.
- Reduced header and tab heights in the desktop app, increasing main
view space.
- Updated add-page button size, padding, and font for improved
usability.
  - Refined menu positioning in workspace selector for dense layouts.
  - Improved macOS window button positioning for better alignment.
  - Updated and restructured iOS app dependencies.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: fengmk2 <fengmk2@gmail.com>

packages/frontend/core/src/desktop/components/app-container/styles.css.ts

@@ -59,14 +59,14 @@ export const desktopAppViewMain = style({
   display: 'flex',
   flexFlow: 'row',
   width: '100%',
-  height: 'calc(100% - 52px)',
+  height: 'calc(100% - 40px)',
   position: 'relative',
 });
 
 export const desktopTabsHeader = style({
   display: 'flex',
   flexFlow: 'row',
-  height: '52px',
+  height: '40px',
   zIndex: 1,
   width: '100%',
   overflow: 'hidden',

packages/frontend/core/src/desktop/pages/workspace/layouts/styles.css.ts

@@ -1,33 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const browserAppViewContainer = style({
-  display: 'flex',
-  flexFlow: 'row',
-  height: '100%',
-  width: '100%',
-  position: 'relative',
-});
-
-export const desktopAppViewContainer = style({
-  display: 'flex',
-  flexFlow: 'column',
-  height: '100%',
-  width: '100%',
-});
-
-export const desktopAppViewMain = style({
-  display: 'flex',
-  flexFlow: 'row',
-  width: '100%',
-  height: 'calc(100% - 52px)',
-  position: 'relative',
-});
-
-export const desktopTabsHeader = style({
-  display: 'flex',
-  flexFlow: 'row',
-  height: '52px',
-  zIndex: 1,
-  width: '100%',
-  overflow: 'hidden',
-});