1 files changed, 29 insertions, 20 deletions

diff --git a/packages/renderer/src/components/ServicePanel.tsx b/packages/renderer/src/components/ServicePanel.tsx
index de58d24..2c79d99 100644
--- a/packages/renderer/src/components/ServicePanel.tsx
+++ b/packages/renderer/src/components/ServicePanel.tsx
@@ -19,57 +19,66 @@
  */
 
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import type RendererStore from '../stores/RendererStore';
 import Service from '../stores/Service';
 
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
-import { useStore } from './StoreProvider';
 import InsecureConnectionBanner from './banner/InsecureConnectionBanner';
 import NewWindowBanner from './banner/NewWindowBanner';
 import ErrorPage from './errorPage/ErrorPage';
 import LocationBar from './locationBar/LocationBar';
 
+const ServicePanelRoot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'hidden',
+})(({ hidden }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  display: 'flex',
+  overflow: 'hidden',
+  visibility: hidden ? 'hidden' : 'visible',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+}));
+
 export function getServicePanelID(service: Service): string {
   return `Sophie-${service.id}-ServicePanel`;
 }
 
-function ServicePanel({ service }: { service: Service }): JSX.Element {
+function ServicePanel({
+  store,
+  service,
+}: {
+  store: RendererStore;
+  service: Service;
+}): JSX.Element {
   const {
     settings: { selectedService },
-  } = useStore();
-
+  } = store;
   const {
     settings: { name },
   } = service;
-  const visible = service === selectedService;
 
   return (
-    <Box
+    <ServicePanelRoot
       id={getServicePanelID(service)}
       role="tabpanel"
       aria-label={name}
-      sx={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        display: 'flex',
-        overflow: 'hidden',
-        visibility: visible ? 'visible' : 'hidden',
-        flexDirection: 'column',
-        alignItems: 'stretch',
-      }}
+      hidden={service !== selectedService}
     >
-      <LocationBar service={service} />
+      <LocationBar store={store} service={service} />
       <InsecureConnectionBanner service={service} />
       <NewWindowBanner service={service} />
       <BrowserViewPlaceholder service={service}>
         <ErrorPage service={service} />
       </BrowserViewPlaceholder>
-    </Box>
+    </ServicePanelRoot>
   );
 }