3 files changed, 39 insertions, 16 deletions

diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 3b47990..2241476 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -32,6 +32,7 @@ const ServiceSwitcherRoot = styled(Tabs, {
   name: 'ServiceSwitcher',
   slot: 'Root',
 })(({ theme }) => ({
+  // Move the indicator to the outer side of the window.
   '.MuiTabs-indicator': {
     ...(theme.direction === 'ltr'
       ? {
@@ -50,13 +51,15 @@ const ServiceSwitcherTab = styled(Tab, {
   slot: 'Tab',
 })(({ theme }) => ({
   minWidth: 0,
+  paddingInlineStart: theme.spacing(2),
+  paddingInlineEnd: `calc(${theme.spacing(2)} - 1px)`,
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest,
   }),
   '&.Mui-selected': {
     backgroundColor:
       theme.palette.mode === 'dark'
-        ? alpha(theme.palette.text.primary, 0.12)
+        ? alpha(theme.palette.text.primary, 0.13)
         : alpha(theme.palette.primary.light, 0.24),
   },
 }));
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
index 80826ca..4f27d68 100644
--- a/packages/renderer/src/components/sidebar/Sidebar.tsx
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -19,7 +19,6 @@
  */
 
 import Box from '@mui/material/Box';
-import { alpha } from '@mui/material/styles';
 import React from 'react';
 
 import ServiceSwitcher from './ServiceSwitcher';
@@ -36,21 +35,29 @@ export default function Sidebar(): JSX.Element {
         flexDirection: 'column',
         alignItems: 'center',
         paddingY: 1,
+        paddingInlineStart: '1px',
         gap: 1,
-        background: alpha(theme.palette.text.primary, 0.09),
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? 'rgba(255, 255, 255, 0.09)'
+            : 'rgba(0, 0, 0, 0.06)',
         backgroundClip: 'padding-box',
         borderInlineEnd: `1px solid ${theme.palette.divider}`,
-        minWidth: 69,
+        minWidth: `calc(${theme.spacing(4)} + 36px)`,
       })}
     >
       <ToggleLocationBarButton />
-      <ServiceSwitcher />
       <Box
         sx={{
           flex: 1,
-          WebkitAppRegion: 'drag',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+          marginInlineStart: '-1px',
         }}
-      />
+      >
+        <ServiceSwitcher />
+      </Box>
       <ToggleDarkModeButton />
     </Box>
   );
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 7e20598..60033b0 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -20,12 +20,29 @@
 
 import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight';
+import { useTheme } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from '../StoreProvider';
+import { LOCATION_BAR_ID } from '../locationBar/LocationBar';
+
+function ToggleLocationBarIcon({
+  loading,
+  show,
+}: {
+  loading: boolean;
+  show: boolean;
+}): JSX.Element {
+  const { direction } = useTheme();
+  if (loading) {
+    return <CircularProgress color="inherit" size="1.5rem" />;
+  }
+  const left = direction === 'ltr' ? show : !show;
+  return left ? <IconChevronLeft /> : <IconChevronRight />;
+}
 
 function ToggleLocationBarButton(): JSX.Element {
   const store = useStore();
@@ -33,21 +50,17 @@ function ToggleLocationBarButton(): JSX.Element {
     settings: { selectedService, showLocationBar },
   } = store;
 
-  let icon: JSX.Element;
-  if (selectedService?.state === 'loading') {
-    icon = <CircularProgress color="inherit" size="1.5rem" />;
-  } else {
-    icon = showLocationBar ? <IconChevronLeft /> : <IconChevronRight />;
-  }
-
   return (
     <IconButton
       aria-pressed={showLocationBar}
-      aria-controls="locationBar"
+      aria-controls={LOCATION_BAR_ID}
       aria-label="Show location bar"
       onClick={() => store.toggleLocationBar()}
     >
-      {icon}
+      <ToggleLocationBarIcon
+        loading={selectedService?.state === 'loading'}
+        show={showLocationBar}
+      />
     </IconButton>
   );
 }