Control widget size inside a panel grid row

Community Usage questions
1

Hey everyone. I am trying to build an OSC interface for my MIDI controllers (Intech Studio PO16, 2 x PBF4 and EN16).

I made 4 panels (one for each separate MIDI controller) containing grids of 8, 6, 6 and 8 rows and 4 columns. The first row contains knobs or encoders widgets, the row below contains a text widget, and so on.

I'm happy with the panels and the grid size, but the problem is that most widgets are too big since they strech to their entire grid area:

  1. knobs and encoders are too close together, and I'd like them to be smaller (see red dot on the top right corner)
  2. Buttons (that have a 100 radius) have an oval shape instead of being round and centered (see red dot at the bottom)

Screenshot 2024-01-20 170727
Screenshot 2024-01-20 1707272992×1447 113 KB

I'm gessing a top / bottom padding could work, but I don't know how to apply them to an entire row. I tried a max-height on each separate widget, but the widget was stuck in the upper right corner of the grid area.

Is there an easy way to control the size (and position) of widgets inside a specific panel grid area or row?

2

This should do in your case, using the css property of the controllers panel:

.button-container,
.encoder-container,
.knob-container {
  margin: 5rem;

}
.button-container {
  width: auto!important;
  aspect-ratio: 1 / 1;
}
3

Thank you very much.

In the meantime, I actually went a slightly different route with horizontal panels stacked inside parent panels, but this will definitely help me at some point for other tweakings.