AppTitle: Fix overflowing text (#103583)

Don't wrap truncated text in a span

public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.tsx

@@ -1,9 +1,8 @@
-import { css } from '@emotion/css';
 import { useEffect } from 'react';
 
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Text, useStyles2 } from '@grafana/ui';
+import { Space, Text } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { getUserOrganizations, setUserOrganization } from 'app/features/org/state/actions';
 import { useDispatch, useSelector, UserOrg } from 'app/types';
@@ -15,7 +14,6 @@ import { OrganizationSelect } from './OrganizationSelect';
 export function OrganizationSwitcher() {
   const dispatch = useDispatch();
   const orgs = useSelector((state) => state.organization.userOrgs);
-  const styles = useStyles2(getStyles);
   const onSelectChange = (option: SelectableValue<UserOrg>) => {
     if (option.value) {
       setUserOrganization(option.value.orgId);
@@ -35,17 +33,12 @@ export function OrganizationSwitcher() {
 
   if (orgs?.length <= 1) {
     return (
-      <span className={styles.brandTitle}>
+      <>
+        <Space h={1} />
         <Text truncate>{Branding.AppTitle}</Text>
-      </span>
+      </>
     );
   }
 
   return <OrganizationSelect orgs={orgs} onSelectChange={onSelectChange} />;
 }
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  brandTitle: css({
-    paddingLeft: theme.spacing(1),
-  }),
-});