Q:

Leaflet : LayerGroup of Popups can't have modified width / height

My aim is to add additionnal popups for each Marker already defined in another LayerGroup. These Popups should then be controlled through a Leaflet LayerControl, displaying / hiding all the additionnal popups at the same time.

As you can see in the linked image, it works great. My issue is that I now want to reduce the size of these popups, because they are quite big for the little information they contain.
Here is my attempt using the function adding the Popups to another LayerGroup, and using the Leaflet PopupOptions : maxWidth and maxHeight, but it doesn't work at all.
I noticed that it works as intended if I add the new Popups to the map directly, but I need to be able to control the LayerGroup from the LayerControl. Do I have to use hacks through CSS to achieve my goal ? Isn't there a simple solution with my existing code ? 
layers.conf.ts
  const markers: L.Marker[] = GlobalMapService.jsonToArray(globalMapService.markersLayer.getLayers());
  const labelsLayer = L.layerGroup(null); // LayerGroup containing my Popups

  markers.forEach((marker, index) => {
    L.popup({
      offset: [2, -25],   // This works (needed for Angular integration).
      closeButton: false, // This works (as you can see).
      maxWidth: 30,       // This doesn't work at all with a LayerGroup.
      maxHeight: 25       // Same as above.
    })
      .setLatLng(marker.getLatLng())
      .setContent('ID : ' + (index + 1))
      .addTo(labelsLayer);
  });

  return labelsLayer;

layers.conf.ts
  const overlays: L.Control.LayersObject = {
    'Labels': labelsLayer
  };
  globalMapService.overlays = overlays;

LeafletMapComponent.ts
  const map = L.map(this.mapEl.nativeElement, {
    center: [51.505, -0.09],
    zoom: 7,
    layers: [
      this.leafletService.baseLayers['Standard'], // BaseLayer
    ]
  });

  L.control.layers(this.leafletService.baseLayers, this.globalMapService.overlays)
  .addTo(map);

A:

What you can do is add a custom css class to your popup :
markers.forEach((marker, index) => {
    L.popup({
        className: 'small-popup',
        offset: [2, -25],
        closeButton: false
    })
    .setLatLng(marker.getLatLng())
    .setContent('<div class="popup">ID : ' + (index + 1) + '</div>')
    .addTo(labelsLayer);
});

I've added a div inside your popup, you don't need it but you can have also more control inside your popup.
Then add this css :
.small-popup {
    max-width: 30px;
    max-height: 25px;
}

This is what I've done and for me it's a great solution since you can easily edit your css afterward.

