Fix multi-schema data selector header styling (#40101) (#40159)

* Fix multi-schema data selector header styling

- Makes spacing equal on both sides of the divider
- Changes the divider from the hyphen to the forward slash

* Change the breadcrumb divider in the Table Metadata section

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>

frontend/src/metabase/admin/datamodel/metadata/components/MetadataTableList/MetadataTableList.tsx

@@ -193,7 +193,7 @@ const TableBreadcrumbs = ({ schemaId, onBack }: TableBreadcrumbsProps) => {
         <Icon name="chevronleft" size={10} />
         {t`Schemas`}
       </BackIconContainer>
-      <span className="mx1">-</span>
+      <span className="mx1">/</span>
       <span>{getSchemaName(schemaId)}</span>
     </h4>
   );

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorTablePicker/DataSelectorTablePicker.styled.tsx

@@ -27,13 +27,12 @@ export const DataSelectorTablePickerHeaderClickable = styled.span<Props>`
 
 export const DataSelectorTablePickerHeaderDatabaseName = styled.span`
   flex-wrap: wrap;
-  margin-left: ${space(1)};
+  margin-inline-start: ${space(1)};
 `;
 
 export const DataSelectorTablePickerHeaderSchemaName = styled.span`
   color: ${color("text-medium")};
   flex-wrap: wrap;
-  margin-left: ${space(1)};
 `;
 
 export const LinkToDocsContainer = styled.div`
@@ -47,3 +46,9 @@ export const NoTablesFound = styled.div`
   padding: ${space(4)};
   text-align: center;
 `;
+
+export const DataSelectorHeaderDivider = styled.span`
+  color: ${color("text-medium")};
+  display: inline-block;
+  margin-inline: ${space(1)};
+`;

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorTablePicker/DataSelectorTablePicker.tsx

@@ -21,6 +21,7 @@ import {
   DataSelectorTablePickerHeaderSchemaName as HeaderSchemaName,
   LinkToDocsContainer,
   NoTablesFound,
+  DataSelectorHeaderDivider,
 } from "./DataSelectorTablePicker.styled";
 
 type DataSelectorTablePickerProps = {
@@ -170,10 +171,12 @@ const Header = ({
     </HeaderClickable>
 
     {selectedSchema?.name && schemas.length > 1 && (
-      <HeaderSchemaName>
-        {"- "}
-        <span data-testid="source-schema">{selectedSchema.displayName()}</span>
-      </HeaderSchemaName>
+      <>
+        <DataSelectorHeaderDivider>/</DataSelectorHeaderDivider>
+        <HeaderSchemaName data-testid="source-schema">
+          {selectedSchema.displayName()}
+        </HeaderSchemaName>
+      </>
     )}
   </HeaderContainer>
 );