fix(sanity): update the title to be ellipsed when the text is too long (

#7380)

* fix(sanity): update the title to remain ellipsed when it's too long

* refactor(sanity): add title to the title (hovering)

* refactor(sanity): remove inline style for flex + hoist inline style

packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx

@@ -2,11 +2,17 @@ import {DocumentIcon} from '@sanity/icons'
 import {Flex, Text} from '@sanity/ui'
 import {createElement, memo, type ReactElement} from 'react'
 import {unstable_useValuePreview as useValuePreview, useTranslation} from 'sanity'
+import {styled} from 'styled-components'
 
 import {structureLocaleNamespace} from '../../../../i18n'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentPerspectiveMenu} from './perspective/DocumentPerspectiveMenu'
 
+const TitleContainer = styled(Text)`
+  max-width: 100%;
+  min-width: 0;
+`
+
 export const DocumentHeaderTitle = memo(function DocumentHeaderTitle(): ReactElement {
   const {connectionState, schemaType, title, value: documentValue} = useDocumentPane()
   const subscribed = Boolean(documentValue) && connectionState !== 'connecting'
@@ -41,23 +47,21 @@ export const DocumentHeaderTitle = memo(function DocumentHeaderTitle(): ReactEle
   }
 
   return (
-    <Flex flex={1} gap={0}>
-      <Flex flex="none" gap={3} padding={2}>
-        <Text size={1}>{createElement(schemaType?.options?.icon || DocumentIcon)}</Text>
-        <Text
-          muted={!value?.title}
-          size={1}
-          textOverflow="ellipsis"
-          weight={value?.title ? 'semibold' : undefined}
-        >
-          {value?.title || (
-            <span style={{color: 'var(--card-muted-fg-color)'}}>
-              {t('panes.document-header-title.untitled.text')}
-            </span>
-          )}
-        </Text>
-      </Flex>
-
+    <Flex flex={1} align="center" gap={3} paddingX={2}>
+      <Text size={1}>{createElement(schemaType?.options?.icon || DocumentIcon)}</Text>
+      <TitleContainer
+        muted={!value?.title}
+        size={1}
+        textOverflow="ellipsis"
+        weight={value?.title ? 'semibold' : undefined}
+        title={value?.title}
+      >
+        {value?.title || (
+          <span style={{color: 'var(--card-muted-fg-color)'}}>
+            {t('panes.document-header-title.untitled.text')}
+          </span>
+        )}
+      </TitleContainer>
       <Flex flex="none" gap={1}>
         <DocumentPerspectiveMenu />
       </Flex>