Fixing Buttons Overlapping bug

src/diff/base-unified-diff.ts

@@ -90,20 +90,32 @@ export abstract class BaseUnifiedDiffManager {
    */
   protected abstract removeToolbarButtons(): void;
 
+  /**
+   * Hook to hide the cell toolbar — overridden in subclasses
+   */
+  protected hideCellToolbar(): void {}
+
+  /**
+   * Hook to show the cell toolbar — overridden in subclasses
+   */
+  protected showCellToolbar(): void {}
+
   /**
    * Activate the diff view
    */
   protected activate(): void {
     this._applyDiff();
     this.addToolbarButtons();
+    this.hideCellToolbar();
   }
 
   /**
    * Deactivate the diff view
    */
-  private _deactivate(): void {
+  protected _deactivate(): void {
     this.removeToolbarButtons();
     this._cleanupEditor();
+    this.showCellToolbar();
   }
 
   /**

src/diff/unified-cell.ts

@@ -1,4 +1,4 @@
-import { ICellModel } from '@jupyterlab/cells';
+import { Cell } from '@jupyterlab/cells';
 import { checkIcon, ToolbarButton, undoIcon } from '@jupyterlab/ui-components';
 import { ICellFooterTracker } from 'jupyterlab-cell-input-footer';
 import {
@@ -12,9 +12,9 @@ import type { ISharedText } from '@jupyter/ydoc';
  */
 export interface IUnifiedCellDiffOptions extends IBaseUnifiedDiffOptions {
   /**
-   * The cell to show the diff for
+   * The cell widget to show the diff for
    */
-  cell: ICellModel;
+  cell: Cell;
 
   /**
    * The cell footer tracker
@@ -36,11 +36,72 @@ export class UnifiedCellDiffManager extends BaseUnifiedDiffManager {
     this.activate();
   }
 
+  private static _activeDiffCount = 0;
+
   /**
    * Get the shared model for source manipulation
    */
   protected getSharedModel(): ISharedText {
-    return this._cell.sharedModel;
+    return this._cell.model.sharedModel;
+  }
+
+  /**
+   * Activate the diff view without cell toolbar.
+   */
+  protected activate(): void {
+    super.activate();
+    UnifiedCellDiffManager._activeDiffCount++;
+
+    const observer = new MutationObserver(() => {
+      this.hideCellToolbar();
+    });
+
+    observer.observe(this._cell.node, {
+      childList: true,
+      subtree: true
+    });
+
+    (this as any)._toolbarObserver = observer;
+  }
+
+  /**
+   * Deactivate the diff view with cell toolbar.
+   */
+  protected _deactivate(): void {
+    super['_deactivate']();
+    UnifiedCellDiffManager._activeDiffCount = Math.max(
+      0,
+      UnifiedCellDiffManager._activeDiffCount - 1
+    );
+
+    const observer = (this as any)._toolbarObserver as MutationObserver;
+    if (observer) {
+      observer.disconnect();
+    }
+  }
+  /**
+   * Hide the cell's toolbar while the diff is active
+   */
+  protected hideCellToolbar(): void {
+    const toolbar = this._cell.node.querySelector('jp-toolbar') as HTMLElement;
+    if (toolbar) {
+      toolbar.style.display = 'none';
+    }
+  }
+
+  /**
+   * Show the cell's toolbar when the diff is deactivated
+   */
+  protected showCellToolbar(): void {
+    if (UnifiedCellDiffManager._activeDiffCount > 0) {
+      return;
+    }
+    const toolbar = this._cell.node.querySelector(
+      'jp-toolbar'
+    ) as HTMLElement | null;
+    if (toolbar) {
+      toolbar.style.display = '';
+    }
   }
 
   /**
@@ -81,6 +142,9 @@ export class UnifiedCellDiffManager extends BaseUnifiedDiffManager {
     }
 
     this._cellFooterTracker.showFooter(cellId);
+
+    // Hide the main cell toolbar to avoid overlap
+    this.hideCellToolbar();
   }
 
   /**
@@ -104,9 +168,12 @@ export class UnifiedCellDiffManager extends BaseUnifiedDiffManager {
 
     // Hide the footer if no other items remain
     this._cellFooterTracker.hideFooter(cellId);
+
+    // Show the main cell toolbar again
+    this.showCellToolbar();
   }
 
-  private _cell: ICellModel;
+  private _cell: Cell;
   private _cellFooterTracker?: ICellFooterTracker;
 }
 

src/plugin.ts

@@ -274,7 +274,7 @@ const unifiedCellDiffPlugin: JupyterFrontEndPlugin<void> = {
 
         // Create a new manager
         const manager = await createUnifiedCellDiffView({
-          cell,
+          cell: cellWidget,
           editor: cellWidget.editor as CodeMirrorEditor,
           cellFooterTracker,
           originalSource,