feat: improves word wrap handling in labels

src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx

@@ -14,7 +14,6 @@ export const ExpandButton = ({ isExpanded, onClick }: Props) => {
   return (
     <MuiButton
       sx={{
-        position: 'absolute',
         px: 0.5,
         py: 0,
         height: 'auto',

src/components/SceneLayers/Nodes/Node/LabelContainer/LabelContainer.tsx

@@ -76,18 +76,21 @@ export const LabelContainer = ({
       <Box
         sx={{
           position: 'absolute',
-          bgcolor: 'common.white',
-          border: '1px solid',
-          borderColor: 'grey.400',
-          borderRadius: 2,
           left: -contentSize.width * 0.5,
           top: -(contentSize.height + labelHeight + yOffset),
-          overflow: 'hidden'
+          overflow: 'hidden',
+          width: 250
         }}
       >
         <Box
           ref={contentRef}
           sx={{
+            position: 'relative',
+            display: 'inline-block',
+            bgcolor: 'common.white',
+            border: '1px solid',
+            borderColor: 'grey.400',
+            borderRadius: 2,
             py: 1,
             px: 1.5
           }}
@@ -101,10 +104,11 @@ export const LabelContainer = ({
             <Box
               sx={{
                 position: 'absolute',
-                height: 50,
+                height: 60,
                 width: '100%',
                 bottom: 0,
-                left: 0
+                left: 0,
+                overflow: 'hidden'
               }}
             >
               <Gradient
@@ -112,24 +116,32 @@ export const LabelContainer = ({
               />
             </Box>
           )}
-        </Box>
 
-        {isContentTruncated && (
-          <ExpandButton
-            isExpanded={isExpanded}
-            onClick={() => {
-              setIsExpanded(true);
+          <Box
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              right: 0
             }}
-          />
-        )}
-        {isExpanded && (
-          <ExpandButton
-            isExpanded={isExpanded}
-            onClick={() => {
-              setIsExpanded(false);
-            }}
-          />
-        )}
+          >
+            {isContentTruncated && (
+              <ExpandButton
+                isExpanded={isExpanded}
+                onClick={() => {
+                  setIsExpanded(true);
+                }}
+              />
+            )}
+            {isExpanded && (
+              <ExpandButton
+                isExpanded={isExpanded}
+                onClick={() => {
+                  setIsExpanded(false);
+                }}
+              />
+            )}
+          </Box>
+        </Box>
       </Box>
     </Box>
   );

src/examples/initialData.ts

@@ -18,9 +18,28 @@ const isopacks = flattenCollections([
 // The data used in this visualisation example has been derived from the following blog post
 // https://www.altexsoft.com/blog/travel/airport-technology-management-operations-software-solutions-and-vendors/
 export const initialData: InitialData = {
-  icons: isopacks
+  icons: isopacks,
+  items: [
+    {
+      id: 'item1',
+      name: 'This is the ting',
+      icon: 'storage'
+    }
+  ],
+  views: [
+    {
+      id: 'view1',
+      name: 'View 1',
+      items: [
+        {
+          id: 'item1',
+          tile: { x: 0, y: 0 },
+          labelHeight: 100
+        }
+      ]
+    }
+  ]
 };
-
 // export const initialData: InitialData = {
 //   title: 'Airport Management Software',
 //   icons: isopacks,