Sketch Widget's toolbarKind set to 'floating', but showing as docked

jssdkuser

We've got an angular project that uses the JS SDK for ESRI. We recently updated it and now our Sketch widget is defaulting to the 'docked' behavior (the ellipsis that you have to click on to see the button options, this site isn't letting me send a screenshot of it).

I'm not sure if it's possible to provide a minimum sample of this on codepen. It seems to be ignoring the imports for the ESRI dependencies.

This is despite the correct setting being used for 'toolbarKind' as shown below.

this.sketch = new Sketch({
        view: this.view,
        // something is causing the Sketch to exhibit the 'docked' behavior, even when toolbarKind is set to 'floating'.
        toolbarKind: 'floating',
        layer: this.sketchGraphicsLayer,
        availableCreateTools: ['point', 'polyline', 'polygon', 'circle'],
        visibleElements: { duplicateButton: false,
          selectionTools: {"lasso-selection": false, "rectangle-selection": false },
          settingsMenu: false,
          undoRedoMenu: false },
      });

Here are the relevant version numbers from my package.json:

"@arcgis/core": "^4.32.10",
"@arcgis/map-components": "^4.32.10",
"@esri/calcite-components": "^3.1.0"

Our customers don't want to have to click on the ellipsis in order to see the sketches.

Edvinas_S

I don't work with Angular, but Sketch widget in "floating" mode can still be squeezed if it's parent has limited width. "floating" mode also adds a drop shadow around the widget (see the screenshot). Is it visible in your case?