CanvasScaleLine has an odd overlay or mask in PrintDialog

[ElenaWu171]

There is an odd overlay or mask on the right side of the scale bar, as seen in the attached image.
When I disable the legend options, the strange overlay on the right side of the scale bar disappears
The overlay appears to be covering part of the scale bar, which is not the intended design. Could anyone please help me identify the cause of this issue and suggest a solution?

import CanvasScaleLine from "ol-ext/control/CanvasScaleLine";
import CanvasAttribution from "ol-ext/control/CanvasAttribution";
import CanvasTitle from "ol-ext/control/CanvasTitle";
import PrintDialog from "ol-ext/control/PrintDialog";
import Legend from "ol-ext/legend/Legend";
import ControlLegend from "ol-ext/control/Legend";

const printControl = new PrintDialog({
    lang: "tw", 
  });
  printControl.setSize("A4");
  map.addControl(printControl); 
  map.addControl(
    new CanvasAttribution({
      canvas: true,
    })
  );

  // Add a title control
  map.addControl(
    new CanvasTitle({
      title: "title",
      visible: false,
      style: new Style({
        text: new Text({
          font: '20px "Lucida Grande",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif',
        }),
      }),
    })
  );
  const PrintscaleLineControl = new CanvasScaleLine();
  map.addControl(PrintscaleLineControl); 


  // Define a new legend
  const legend = new Legend({
    title: "legend",

  });
  const legendCtrl = new ControlLegend({
    legend: legend,
    collapsed: false,
  });
  map.addControl(legendCtrl);

[Viglino]

It seems something override the legend control CSS when printing.
Make sure there is no CSS on the .ol-control.ol-legend class that should be hidden.

[ElenaWu171]

Thank you for your response. I'd like to add a bit more detail.
I only added a display style to .ol-control.ol-legend.
When I'm on the map, the scale bar appears normal, but when I open the PrintDialog, the scale bar gets covered by a strange overlay.

[Viglino]

The .ol-control.ol-legend shold have a display: none when inside the .ol-ext-print-dialog or it will appear on the map.
Something like:

.ol-ext-print-dialog .ol-print-map .ol-control.ol-legend {
  display: none!important
}

[ElenaWu171]

I think I successfully removed the strange mask by switching the order of adding features and the scale, like this:
map.addControl(legendCtrl); // add legend
map.addControl(PrintscaleLineControl); // add CanvasScaleLine