diff --git a/ui/src/lib/store/canvasSlice.tsx b/ui/src/lib/store/canvasSlice.tsx
index 71a058eb..58df18ae 100644
--- a/ui/src/lib/store/canvasSlice.tsx
+++ b/ui/src/lib/store/canvasSlice.tsx
@@ -281,6 +281,8 @@ export interface CanvasSlice {
     parent: string
   ) => void;
 
+  setNodeWidth: (id: string, width: number) => void;
+
   pastingNodes?: Node[];
   headPastingNodes?: Set<string>;
   mousePos?: XYPosition | undefined;
@@ -452,6 +454,22 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
     }
   },
 
+  setNodeWidth: (id, width) => {
+    let nodesMap = get().ydoc.getMap<Node>("pods");
+    let node = nodesMap.get(id);
+    if (!node) return;
+    nodesMap.set(id, { ...node, width });
+    let geoData = {
+      parent: node.parentNode ? node.parentNode : "ROOT",
+      x: node.position.x,
+      y: node.position.y,
+      width: node.width!,
+      height: node.height!,
+    };
+    get().setPodGeo(node.id, geoData, true);
+    get().updateView();
+  },
+
   isPasting: false,
   isCutting: false,
 
diff --git a/ui/src/lib/store/podSlice.tsx b/ui/src/lib/store/podSlice.tsx
index d4933c31..3b46e130 100644
--- a/ui/src/lib/store/podSlice.tsx
+++ b/ui/src/lib/store/podSlice.tsx
@@ -74,7 +74,7 @@ export const createPodSlice: StateCreator<MyState, [], [], PodSlice> = (
       // @ts-ignore
       "setPodName"
     ),
-  setPodContent: ({ id, content }) =>
+  setPodContent: ({ id, content }) => {
     set(
       produce((state) => {
         let pod = state.pods[id];
@@ -84,7 +84,22 @@ export const createPodSlice: StateCreator<MyState, [], [], PodSlice> = (
       false,
       // @ts-ignore
       "setPodContent"
-    ),
+    );
+    // also calculate the sizes of the lines, and update the width of the pod
+    const sizes = content
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0)
+      .map((line) => line.length);
+    // calculate the sum
+    const sum = sizes.reduce((a, b) => a + b, 0);
+    // calculate the 70% average width
+    let width = Math.round((sum / sizes.length) * 0.7);
+    // the width should be within 60 and 80
+    width = Math.min(80, Math.max(60, width));
+    // set the width
+    get().setNodeWidth(id, Math.round((width / 40) * 300));
+  },
   initPodContent: ({ id, content }) =>
     set(
       produce((state) => {