Move the separator into BrowserConnectionStatus to encapsulate its layout spacing

- in `apps/editor/src/views/prompt/frontend/Main/MainView/components/BrowserConnectionStatus/BrowserConnectionStatus.tsx` show separator(6) when showing the status bar

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -248,19 +248,16 @@ export const MainView: React.FC<Props> = (props) => {
       <UiScrollable scroll_to_top_key={props.scroll_reset_key} top_shadow>
         <div className={styles.container}>
           {props.target == TARGET.WEB && (
-            <>
-              <BrowserConnectionStatus
-                is_connected={props.is_connected}
-                on_install={props.on_install_browser_extension}
-                translations={{
-                  connected: t('main.browser-connection.connected'),
-                  not_connected: t('main.browser-connection.not-connected'),
-                  install: t('main.browser-connection.install'),
-                  hide: t('main.browser-connection.hide')
-                }}
-              />
-              <UiSeparator height={6} />
-            </>
+            <BrowserConnectionStatus
+              is_connected={props.is_connected}
+              on_install={props.on_install_browser_extension}
+              translations={{
+                connected: t('main.browser-connection.connected'),
+                not_connected: t('main.browser-connection.not-connected'),
+                install: t('main.browser-connection.install'),
+                hide: t('main.browser-connection.hide')
+              }}
+            />
           )}
 
           {props.response_history.length > 0 && (

apps/editor/src/views/prompt/frontend/Main/MainView/components/BrowserConnectionStatus/BrowserConnectionStatus.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { StatusBar } from '@ui/components/editor/prompt/StatusBar'
+import { Separator } from '@ui/components/editor/prompt/Separator'
 
 type Props = {
   is_connected: boolean
@@ -58,19 +59,23 @@ export const BrowserConnectionStatus: React.FC<Props> = (props) => {
   }
 
   return (
-    <StatusBar
-      theme={props.is_connected ? 'success' : 'default'}
-      icon={
-        props.is_connected
-          ? 'codicon-debug-connected'
-          : 'codicon-debug-disconnect'
-      }
-      label={
-        props.is_connected
-          ? props.translations.connected
-          : props.translations.not_connected
-      }
-      actions={actions}
-    />
+    <>
+      <StatusBar
+        theme={props.is_connected ? 'success' : 'default'}
+        icon={
+          props.is_connected
+            ? 'codicon-debug-connected'
+            : 'codicon-debug-disconnect'
+        }
+        label={
+          props.is_connected
+            ? props.translations.connected
+            : props.translations.not_connected
+        }
+        actions={actions}
+      />
+      <Separator height={6} />
+    </>
   )
 }
+