fixes #126 users now by default have the descriptions expanded in image export

packages/fossflow-lib/src/Isoflow.tsx

@@ -61,6 +61,12 @@ const App = ({
     uiStateActions.setEnableDebugTools(enableDebugTools);
   }, [enableDebugTools, uiStateActions]);
 
+  useEffect(() => {
+    if (renderer?.expandLabels !== undefined) {
+      uiStateActions.setExpandLabels(renderer.expandLabels);
+    }
+  }, [renderer?.expandLabels, uiStateActions]);
+
   if (!initialDataManager.isReady) return null;
 
   return (

packages/fossflow-lib/src/components/ExportImageDialog/ExportImageDialog.tsx

@@ -296,6 +296,11 @@ export const ExportImageDialog = ({ onClose, quality = 1.5 }: Props) => {
     setShowGrid(checked);
   };
 
+  const [expandLabels, setExpandLabels] = useState(true);
+  const handleExpandLabelsChange = (checked: boolean) => {
+    setExpandLabels(checked);
+  };
+
   const [backgroundColor, setBackgroundColor] = useState<string>(
     customVars.customPalette.diagramBg
   );
@@ -343,7 +348,7 @@ export const ExportImageDialog = ({ onClose, quality = 1.5 }: Props) => {
       }, 200);
       return () => clearTimeout(timer);
     }
-  }, [showGrid, backgroundColor, exportImage, cropToContent]);
+  }, [showGrid, backgroundColor, expandLabels, exportImage, cropToContent]);
 
   useEffect(() => {
     if (!imageData) {
@@ -413,7 +418,8 @@ export const ExportImageDialog = ({ onClose, quality = 1.5 }: Props) => {
                     }}
                     renderer={{
                       showGrid,
-                      backgroundColor
+                      backgroundColor,
+                      expandLabels
                     }}
                   />
                 </Box>
@@ -494,6 +500,18 @@ export const ExportImageDialog = ({ onClose, quality = 1.5 }: Props) => {
                     />
                   }
                 />
+                <FormControlLabel
+                  label="Expand descriptions"
+                  control={
+                    <Checkbox
+                      size="small"
+                      checked={expandLabels}
+                      onChange={(event) => {
+                        handleExpandLabelsChange(event.target.checked);
+                      }}
+                    />
+                  }
+                />
                 <FormControlLabel
                   label="Crop to content"
                   control={

packages/fossflow-lib/src/components/Label/ExpandableLabel.tsx

@@ -4,6 +4,7 @@ import { useResizeObserver } from 'src/hooks/useResizeObserver';
 import { Gradient } from 'src/components/Gradient/Gradient';
 import { ExpandButton } from './ExpandButton';
 import { Label, Props as LabelProps } from './Label';
+import { useUiStateStore } from 'src/stores/uiStateStore';
 
 type Props = Omit<LabelProps, 'maxHeight'> & {
   onToggleExpand?: (isExpanded: boolean) => void;
@@ -16,6 +17,8 @@ export const ExpandableLabel = ({
   onToggleExpand,
   ...rest
 }: Props) => {
+  const forceExpandLabels = useUiStateStore((state) => state.expandLabels);
+  const editorMode = useUiStateStore((state) => state.editorMode);
   const [isExpanded, setIsExpanded] = useState(false);
   const contentRef = useRef<HTMLDivElement>();
   const { observe, size: contentSize } = useResizeObserver();
@@ -26,23 +29,39 @@ export const ExpandableLabel = ({
     observe(contentRef.current);
   }, [observe]);
 
+  const effectiveExpanded = useMemo(() => {
+    // Only force expand in NON_INTERACTIVE mode (export preview)
+    const shouldForceExpand = forceExpandLabels && editorMode === 'NON_INTERACTIVE';
+    return shouldForceExpand || isExpanded;
+  }, [forceExpandLabels, isExpanded, editorMode]);
+
   const containerMaxHeight = useMemo(() => {
-    return isExpanded ? undefined : STANDARD_LABEL_HEIGHT;
-  }, [isExpanded]);
+    return effectiveExpanded ? undefined : STANDARD_LABEL_HEIGHT;
+  }, [effectiveExpanded]);
 
   const isContentTruncated = useMemo(() => {
-    return !isExpanded && contentSize.height >= STANDARD_LABEL_HEIGHT - 10;
-  }, [isExpanded, contentSize.height]);
+    return !effectiveExpanded && contentSize.height >= STANDARD_LABEL_HEIGHT - 10;
+  }, [effectiveExpanded, contentSize.height]);
+
+  // Determine overflow behavior based on mode
+  const overflowBehavior = useMemo(() => {
+    if (editorMode === 'NON_INTERACTIVE') {
+      // In export mode, no overflow needed - container expands to fit
+      return 'visible';
+    }
+    // In interactive modes, use scroll when expanded, hidden when collapsed
+    return effectiveExpanded ? 'scroll' : 'hidden';
+  }, [editorMode, effectiveExpanded]);
 
   useEffect(() => {
     contentRef.current?.scrollTo({ top: 0 });
-  }, [isExpanded]);
+  }, [effectiveExpanded]);
 
   return (
     <Label
       {...rest}
       maxHeight={containerMaxHeight}
-      maxWidth={isExpanded ? rest.maxWidth * 1.5 : rest.maxWidth}
+      maxWidth={effectiveExpanded ? rest.maxWidth * 1.5 : rest.maxWidth}
     >
       <Box
         ref={contentRef}
@@ -52,7 +71,7 @@ export const ExpandableLabel = ({
           }
         }}
         style={{
-          overflowY: isExpanded ? 'scroll' : 'hidden',
+          overflowY: overflowBehavior,
           maxHeight: containerMaxHeight
         }}
       >
@@ -71,7 +90,7 @@ export const ExpandableLabel = ({
         )}
       </Box>
 
-      {((!isExpanded && isContentTruncated) || isExpanded) && (
+      {editorMode !== 'NON_INTERACTIVE' && ((!isExpanded && isContentTruncated) || isExpanded) && (
         <ExpandButton
           sx={{
             position: 'absolute',

packages/fossflow-lib/src/stores/uiStateStore.tsx

@@ -37,6 +37,7 @@ const initialState = () => {
       panSettings: DEFAULT_PAN_SETTINGS,
       zoomSettings: DEFAULT_ZOOM_SETTINGS,
       connectorInteractionMode: 'click', // Default to click mode
+      expandLabels: false, // Default to collapsed labels
 
       actions: {
         setView: (view) => {
@@ -111,6 +112,9 @@ const initialState = () => {
         },
         setConnectorInteractionMode: (connectorInteractionMode) => {
           set({ connectorInteractionMode });
+        },
+        setExpandLabels: (expandLabels) => {
+          set({ expandLabels });
         }
       }
     };

packages/fossflow-lib/src/types/rendererProps.ts

@@ -1,4 +1,5 @@
 export interface RendererProps {
   showGrid?: boolean;
   backgroundColor?: string;
+  expandLabels?: boolean;
 }

packages/fossflow-lib/src/types/ui.ts

@@ -180,6 +180,7 @@ export interface UiState {
   panSettings: PanSettings;
   zoomSettings: ZoomSettings;
   connectorInteractionMode: ConnectorInteractionMode;
+  expandLabels: boolean;
 
 }
 
@@ -205,6 +206,7 @@ export interface UiStateActions {
   setPanSettings: (settings: PanSettings) => void;
   setZoomSettings: (settings: ZoomSettings) => void;
   setConnectorInteractionMode: (mode: ConnectorInteractionMode) => void;
+  setExpandLabels: (expand: boolean) => void;
 
 }