From 7a1f1faca36b0852cd1bbcb6b59f2410db966594 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Tue, 8 Apr 2025 12:56:11 +0200
Subject: [PATCH] AppTitle: Fix overflowing text (#103583)

Don't wrap truncated text in a span
---
 .../OrganizationSwitcher.tsx                    | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.tsx b/public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.tsx
index e6c3394047a..4138e69733b 100644
--- a/public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/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),
-  }),
-});