fix

Author: MrWangJustToDo

packages/cli/src/components/DiffSplitContentLine.tsx

@@ -76,7 +76,7 @@ const InternalDiffSplitLine = ({
 
   const row = Math.max(oldRow, newRow);
 
-  const contentWidth = columns / 2 - width - 3;
+  const contentWidth = columns / 2 - width - 2;
 
   const oldLineNumberBG = oldLineIsDelete
     ? theme === "light"
@@ -113,7 +113,7 @@ const InternalDiffSplitLine = ({
   return (
     <Box data-line={lineNumber} data-state={hasDiff ? "diff" : "plain"} height={row} width={columns}>
       {hasOldLine ? (
-        <Box width={halfColumns - 1} flexShrink={0}>
+        <>
           <Box width={width + 2} flexShrink={0}>
             <Box width={1}>
               <Text backgroundColor={oldLineNumberBG} wrap="wrap">
@@ -145,16 +145,16 @@ const InternalDiffSplitLine = ({
             syntaxLine={oldSyntaxLine}
             enableHighlight={enableHighlight}
           />
-        </Box>
+        </>
       ) : (
-        <Box width={halfColumns - 1}>
+        <Box width={halfColumns}>
           <Text backgroundColor={emptyBG} wrap="wrap">
             {" ".padEnd(halfColumns * row)}
           </Text>
         </Box>
       )}
       {hasNewLine ? (
-        <Box width={halfColumns - 1} flexShrink={0}>
+        <>
           <Box width={width + 2} flexShrink={0}>
             <Box width={1}>
               <Text backgroundColor={newLineNumberBG} wrap="wrap">
@@ -186,9 +186,9 @@ const InternalDiffSplitLine = ({
             syntaxLine={newSyntaxLine}
             enableHighlight={enableHighlight}
           />
-        </Box>
+        </>
       ) : (
-        <Box width={halfColumns - 1}>
+        <Box width={halfColumns}>
           <Text backgroundColor={emptyBG} wrap="wrap">
             {" ".padEnd(halfColumns * row)}
           </Text>

packages/cli/src/components/DiffSplitHunkLine.tsx

@@ -30,10 +30,10 @@ const DiffSplitHunkLineGitHub = ({
 
   const hunkContentColor = theme === "light" ? diffHunkContentColor.light : diffHunkContentColor.dark;
 
-  const contentWidth = columns - width - 4;
+  const contentWidth = columns - width - 2;
 
   return (
-    <Box data-line={`${lineNumber}-hunk`} data-state="hunk">
+    <Box data-line={`${lineNumber}-hunk`} data-state="hunk" height={1}>
       <Box width={width + 2}>
         <Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(width + 2)}</Text>
       </Box>
@@ -69,10 +69,10 @@ const DiffSplitHunkLineGitLab = ({
 
   const hunkContentColor = theme === "light" ? diffHunkContentColor.light : diffHunkContentColor.dark;
 
-  const contentWidth = columns / 2 - width - 2 - 1;
+  const contentWidth = columns / 2 - width - 2;
 
   return (
-    <Box data-line={`${lineNumber}-hunk`} data-state="hunk">
+    <Box data-line={`${lineNumber}-hunk`} data-state="hunk" height={1}>
       <Box width={width + 2}>
         <Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(width + 2)}</Text>
       </Box>

packages/cli/src/components/DiffUnifiedContentLine.tsx

@@ -20,6 +20,7 @@ const DiffUnifiedOldLine = ({
   width,
   theme,
   height,
+  columns,
   rawLine,
   diffLine,
   plainLine,
@@ -33,6 +34,7 @@ const DiffUnifiedOldLine = ({
   width: number;
   height: number;
   theme: "light" | "dark";
+  columns: number;
   rawLine: string;
   lineNumber: number;
   plainLine?: File["plainFile"][number];
@@ -45,7 +47,7 @@ const DiffUnifiedOldLine = ({
   const color = theme === "light" ? diffPlainLineNumberColor.light : diffPlainLineNumberColor.dark;
   const bg = theme === "light" ? diffDelLineNumber.light : diffDelLineNumber.dark;
   return (
-    <Box data-line={index} data-state="diff" height={height}>
+    <Box data-line={index} data-state="diff" height={height} width={columns}>
       <Box width={width * 2 + 2} flexShrink={0}>
         <Box width={width} justifyContent="flex-end">
           <Text color={color} wrap="wrap" backgroundColor={bg} data-line-old-num={lineNumber}>
@@ -91,6 +93,7 @@ const DiffUnifiedNewLine = ({
   width,
   theme,
   height,
+  columns,
   rawLine,
   diffLine,
   plainLine,
@@ -104,6 +107,7 @@ const DiffUnifiedNewLine = ({
   width: number;
   height: number;
   theme: "light" | "dark";
+  columns: number;
   rawLine: string;
   lineNumber: number;
   plainLine?: File["plainFile"][number];
@@ -116,7 +120,7 @@ const DiffUnifiedNewLine = ({
   const color = theme === "light" ? diffPlainLineNumberColor.light : diffPlainLineNumberColor.dark;
   const bg = theme === "light" ? diffAddLineNumber.light : diffAddLineNumber.dark;
   return (
-    <Box data-line={index} data-state="diff" height={height}>
+    <Box data-line={index} data-state="diff" height={height} width={columns}>
       <Box width={width * 2 + 2} flexShrink={0}>
         <Box width={width}>
           <Text backgroundColor={bg} wrap="wrap">
@@ -201,14 +205,11 @@ const _DiffUnifiedLine = memo(
         ? diffFile.getOldPlainLine(oldLinenumber)
         : undefined;
 
-    const contentWidth = columns - (width + 1) * 2 - 1;
+    const contentWidth = columns - (width + 1) * 2;
 
     let row = getCurrentLineRow({ content: rawLine, width: contentWidth });
 
-    row =
-      diffLine?.changes?.hasLineChange && diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE
-        ? row + 1
-        : row;
+    row = diffLine?.changes?.hasLineChange && diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE ? row + 1 : row;
 
     const color = hasDiff
       ? theme === "light"
@@ -233,6 +234,7 @@ const _DiffUnifiedLine = memo(
             theme={theme}
             width={width}
             height={row}
+            columns={columns}
             rawLine={rawLine}
             diffFile={diffFile}
             index={lineNumber}
@@ -250,6 +252,7 @@ const _DiffUnifiedLine = memo(
             theme={theme}
             width={width}
             height={row}
+            columns={columns}
             rawLine={rawLine}
             index={lineNumber}
             diffLine={diffLine}

packages/cli/src/components/DiffUnifiedHunkLine.tsx

@@ -28,7 +28,7 @@ const InternalDiffUnifiedHunkLine = ({
 
   const hunkContentColor = theme === "light" ? diffHunkContentColor.light : diffHunkContentColor.dark;
 
-  const contentWidth = columns - width * 2 - 2 - 1;
+  const contentWidth = columns - width * 2 - 2;
 
   return (
     <Box data-line={`${lineNumber}-hunk`} data-state="hunk" height={1}>

packages/cli/test/index.mjs

@@ -13,7 +13,6 @@ index 5b301628..15aac42f 100644
  
      componentWillUnmount(): void {
        this.props.$$__instance__$$.onUnmounted.forEach((f) => f());
--      this.effect.stop();
 +      this.reactiveEffect.stop();
      }
  
@@ -64,6 +63,6 @@ render(
     data: { hunks: [hunks], newFile: { fileLang: "tsx" } },
     diffViewTheme: "dark",
     diffViewHighlight: true,
-    diffViewMode: DiffModeEnum.Unified
+    diffViewMode: DiffModeEnum.SplitGitLab
   })
 );