[VFX] Prevent the context title from overlapping the space toggle button

Author: julienamsellem

Packages/com.unity.visualeffectgraph/Editor/GraphView/Elements/VFXContextUI.cs

@@ -284,7 +284,7 @@ public VFXContextUI() : base("uxml/VFXContext")
             m_FlowOutputConnectorContainer = this.Q("flow-outputs");
 
             m_HeaderIcon = titleContainer.Q<Image>("icon");
-            m_HeaderSpace = titleContainer.Q<Label>("header-space");
+            m_HeaderSpace = mainContainer.Q<Label>("header-space");
             m_HeaderSpace.AddManipulator(new Clickable(OnSpace));
             m_Subtitle = this.Q<Label>("subtitle");
 

Packages/com.unity.visualeffectgraph/Editor/UIResources/uss/VFXContext.uss

@@ -124,9 +124,11 @@ VFXContextUI #inside
 
 VFXContextUI .extremity
 {
+    max-width: 280px;
+    overflow: hidden;
     border-radius: 2px;
     justify-content:center;
-    align-items:center;
+    align-self: center;
     flex-direction:row;
 }
 
@@ -162,6 +164,7 @@ VFXContextUI #node-border > #inside > #title > #title-label
 
 VFXContextUI #title #icon
 {
+    flex-shrink: 0;
     --unity-image: url("project:///Packages/com.unity.visualeffectgraph/Editor/UIResources/VFX/Execution.png");
     margin-right: 6px;
 }

Packages/com.unity.visualeffectgraph/Editor/UIResources/uss/VFXNode.uss

@@ -122,9 +122,15 @@ VFXBlockUI.node #node-border > #title > Label.first {
 }
 
 #title Label {
+    text-overflow: ellipsis;
+    overflow: hidden;
     align-self: center;
 }
 
+#title Label.first {
+    flex-shrink: 1;
+}
+
 .setting {
     align-self: center;
     margin-left: 4px;

Packages/com.unity.visualeffectgraph/Editor/UIResources/uxml/VFXContext.uxml

@@ -4,8 +4,8 @@
         <ui:VisualElement name="title" pickingMode="Ignore" class="extremity">
           <ui:Image name="icon" text=""/>
           <ui:Label name="title-label" text="" />
-          <ui:Label name="header-space" text="" />
         </ui:VisualElement>
+        <ui:Label name="header-space" text="" />
         <ui:Label name="subtitle" pickingMode="Ignore" text="" class="subtitle" />
         <ui:VisualElement name="user-title" pickingMode="Ignore">
             <ui:Label name="user-label" text="" tooltip="Double click to edit"/>