Fix problems with in-score capo popup positioning & spacing

Issue

The logic introduced in this PR works for the text style popup because that widget doesn't change height. It has caused some undesirable repositioning of the capo popup that we should change.

https://github.com/user-attachments/assets/2d9b421d-9ef9-4e89-bcba-00cc6eb2734a

Task

First, make the capo popup appear to the left of the selected Capo element rather than to its right. This will prevent the popup from jumping position horizontally when the length of the text changes.

Then, maintain the popup's y-position on the screen until it is dismissed and reopened. Right now, the height of the popup changes depending on which options inside it you select, and hovering away from it causes it to jump vertically. If we pin its y-position, it won't vertically jump. One exception: if the popup appears close to the bottom of the window, and the user selects some options that increase its height, then we should of course let the popup move up so that the options don't run off the bottom of the window.

Every time the popup is reopened, it can appear in its 'default' spot relative to the text: to its left, and vertically centered.

Doing the above should also resolve this jumping behavior I noticed, shown in the above video: First, select the capo element to make the popup appear. Then see that the popup jumps vertically when you either:

• Move the mouse over the popup, then move it away OR
• Select the dropdown within the popup

Spacing changes

Please also update the spacing as follows to indicate proper hierarchy of labels to their fields: