Reduce space between Nodes in palette and left align


I am evaluating GoJs and I am trying to add a palette to an Accordion.
I am using angular 9 and gojs-angular.
Working on Windows 10.

I need to reduce the spacing between nodes in the palette. And i want nodes to be left aligned in the palette.
I referred Reducing space between nodes
and Reduce Space between 2 nodes in Palette .
But i don’t see the space minimizing.


  initPalette(): go.Palette {
    const $ = go.GraphObject.make;
    this.palette = $(go.Palette);

this.palette.nodeTemplate =$(go.Node, "Auto",
// for sorting, have the Node.text be the
new go.Binding("text", "name"),
// bind the Part.layerName to control the Node's layer depending on whether it isSelected
new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
// define the node's outer shape
$(go.Shape, "Rectangle",
    name: "SHAPE", fill: "#333333", stroke: 'white', strokeWidth: 3.5,
    // set the port properties:
    portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
    margin: 0
$(go.Panel, "Horizontal",
      name: "Picture",
      desiredSize: new go.Size(35,35)
    new go.Binding("source", "key", findHeadShot)),
  // define the panel where the text will appear
  $(go.Panel, "Table",
      minSize: new go.Size(130, NaN),
      maxSize: new go.Size(180, NaN),
      margin: new go.Margin(0, 0, 0, 0),
      defaultAlignment: go.Spot.Left
    $(go.RowColumnDefinition, { column: 2, width: 2}),
    $(go.TextBlock, textStyle(),  // the name
        row: 0, column: 0, columnSpan: 3,
        font: "10pt Segoe UI,sans-serif",
        editable: true, isMultiline: false,
        minSize: new go.Size(10, 16),
         margin: 0
      new go.Binding("text", "name").makeTwoWay())
       )  // end Table Panel
     ) // end Horizontal Panel
   );  // end Node

    // This function provides a common style for most of the TextBlocks.
       // Some of these values may be overridden in a particular TextBlock.
       function textStyle() {
         return { font: "8pt  Segoe UI,sans-serif", stroke: "white" };

  // This converter is used by the Picture.
  function findHeadShot(key) {
    if (key < 0 || key > 16) return "images/HSnopic.jpg"; // There are only 16 images on the server
    return "assets/demo-client.png";

  //------------------Set the Layout for palette------------------------------------
  this.palette.layout= $(go.GridLayout,
    { sorting: go.GridLayout.Ascending},
    {wrappingColumn: 1},
    {cellSize: go.Size.parse('1 1')},
    {spacing: new go.Size(0,0) },
    {arrangement: go.GridLayout.LeftToRight},
  //---------------Layout Styling ends here----------------------------
return this.palette;

My node template and palette looks like above.

My project is shared here on stackblitz.

I think the nodes actually are touching each other. It might not look that way because you set the node’s shape’s Shape.stroke to “white” and Shape.strokeWidth to 3.5. Don’t set the former property and set the latter property to zero.

thanks walter , It resolved the issue.