diff --git a/examples/graph-layers/graph-viewer/layout-options-panel.tsx b/examples/graph-layers/graph-viewer/layout-options-panel.tsx
index 2c0d4e86..b77448b7 100644
--- a/examples/graph-layers/graph-viewer/layout-options-panel.tsx
+++ b/examples/graph-layers/graph-viewer/layout-options-panel.tsx
@@ -312,13 +312,22 @@ export function LayoutOptionsPanel({
   appliedOptions,
   onApply
 }: LayoutOptionsPanelProps) {
+  const [isDagOptionsOpen, setIsDagOptionsOpen] = useState(true);
+  const handleDagToggle = useCallback((event: React.SyntheticEvent<HTMLDetailsElement>) => {
+    setIsDagOptionsOpen(event.currentTarget.open);
+  }, []);
+
   if (!layout) {
     return null;
   }
 
   if (layout === 'd3-dag-layout') {
     return (
-      <details defaultOpen style={{borderTop: '1px solid #e2e8f0', paddingTop: '0.75rem'}}>
+      <details
+        open={isDagOptionsOpen}
+        onToggle={handleDagToggle}
+        style={{borderTop: '1px solid #e2e8f0', paddingTop: '0.75rem'}}
+      >
         <summary
           style={{
             margin: 0,
diff --git a/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts b/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
index a39907b2..b5a30ddc 100644
--- a/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
+++ b/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
@@ -5,6 +5,25 @@
 import {CompositeLayer} from '@deck.gl/core';
 import {TextLayer} from '@deck.gl/layers';
 
+// deck.gl's MultiIconLayer stores character offsets in a 16-bit buffer, so clamp the
+// computed max width to avoid overflowing the attribute when stylesheet values are invalid.
+const TEXT_LAYER_MAX_SAFE_WIDTH = 32767;
+
+const clampMaxWidth = (value: unknown) => {
+  const width = Number(value);
+  if (!Number.isFinite(width) || width <= 0) {
+    return TEXT_LAYER_MAX_SAFE_WIDTH;
+  }
+  return Math.min(width, TEXT_LAYER_MAX_SAFE_WIDTH);
+};
+
+const normalizeMaxWidth = (value: unknown) => {
+  if (typeof value === 'function') {
+    return (d: unknown) => clampMaxWidth((value as (arg0: unknown) => unknown)(d));
+  }
+  return clampMaxWidth(value);
+};
+
 export class ZoomableTextLayer extends CompositeLayer {
   static layerName = 'ZoomableTextLayer';
 
@@ -59,6 +78,8 @@ export class ZoomableTextLayer extends CompositeLayer {
     // getText only expects function not plain value (string)
     const newGetText = typeof getText === 'function' ? getText : () => getText;
 
+    const resolvedMaxWidth = normalizeMaxWidth(textMaxWidth);
+
     return [
       new TextLayer(
         this.getSubLayerProps({
@@ -73,7 +94,7 @@ export class ZoomableTextLayer extends CompositeLayer {
           getAlignmentBaseline,
           getAngle,
           getText: newGetText,
-          maxWidth: textMaxWidth ?? 12,
+          maxWidth: resolvedMaxWidth,
           wordBreak: textWordBreak ?? 'break-all',
           fontFamily: fontFamily ?? 'Red Hat Text',
           wordUnits: textWordUnits ?? 'pixels',