Regarding cols class in terminal

[anubhavPinewheel]

Hi, I ran into an issue I implemented a terminal in my next.js app where before introducing cols i.e. 80 by default it results in typing command in same line after width space get finished and at certain point it breaks the line. so I dynamically calculated the width and lets say it 53 now, it allow me to break lines when one single line get filled but it cause another issues like overriding on same line backspace is not working after ending a line.

2025-03-27.17-38-40.online-video-cutter.com.mp4

`const calculateDimensions = () => {
const containerWidth = divRef.current?.clientWidth || window.innerWidth;
const charWidth = 10;
return {
cols: Math.max(10, Math.floor((containerWidth - 40) / charWidth)),
};
};

const { cols } = calculateDimensions();

const term = new Terminal({
  rendererType: "canvas",
  convertEol: true,
  cursorBlink: true,
  cursorStyle: "block",
  fontSize: 18,
  theme: {
    background: "#181B25",
    foreground: "#708090",
  },
  fontFamily: "Plus Jakarta Sans",
  letterSpacing: "0 !important",
  padding: "0.5rem 1rem !important",
  scrollback: 5000,
  rows: Math.floor(window.innerHeight / 75),
  allowTransparency: true,
  wordWrap: true,
  breakLongLines: true,
  cols: cols,
});`

Help me out

[anubhavPinewheel]

If I remove cols from term then it goes beyond the container of terminal and breaks after a certain point.

[jerch]

Most likely you forgot to resize the underlying PTY on OS side as well.