Any HUD component on the left will render over the armor bar when the player has absorption hearts, for example due to eating a golden apple. The component cannot be moved one line higher in the preferences, so there's currently no way to remedy this from the player's side to my knowledge.

Could probably automatically move the components up one line while the player has these hearts, akin to how the bingo card is moved to the left when the player holds an item in their off hand.

Would it be possible to add an empty component that the player can move around as they want? It could be set to the bottom left slot by default, which would remedy the confusion you mentioned. The only problem with this is that it would not fix this bug at its root because moving the empty component away will resurface it again. Alternatively, the bottom left component slot could be locked, while still having the empty component visible in the preference menu, including an explanation on why it is locked to that position.

Regarding your proposed solution, depending on how many components you plan to add in the future, it will likely suffice. There are 5-6 slots on each side right now if I can see correctly ingame, that should be plenty. With the 4 components available in beta 2, the upper limit cannot be reached, and moving the components up one slot by default will still make it possible for all 4 to be added on the same side (see https://i.imgur.com/brfjhv3.png - there's enough space above for at least another component). I agree, that it isn't feasible to special case this right now. It might be worth doing so in a future update when there are more components available, or even so many that they fill up most if not all of the slots.

Hmm, I am honestly not too sure how to solve this.

Moving up is a lot more difficult from a technical perspective compared to sideways.
Basically, moving up means "use a different font definition which has its ascent value set higher" and currently the font is hardcoded for each display slot and I don't really want to change this for just a single edge case.
So far I avoided stuff moving up and down based on context, as I could technically have considered this for armor and air bubbles too, but I instead opted for having the first slot of each column always higher.

In any case, it means you will have fewer slots on the left side. With the current amount of components, I don't think it's possible to reach the limit anyways, but basically the limit is lined up with the upper edge of the bingo card. If I now move stuff up (even if that would be depending on context), that means the left side has a slot less available.

I think the best solution is maybe to just always move both of them up and just have a slot less on both columns, otherwise it might be confusing why the left side is higher, or has a slot less available.

What do you think?

Yeah, the amount of slots shouldn't become an issue itself, just if you want all of them stacked on top of each other, but I don't think that's a big concern.

Yeah, I already thought about adding a sort of "spacer" component which can be added multiple times and can allow for gaps between components, but as you said already having one on the left side by default doesn't really solve any of the problems (the question would just change from "why is this higher than the right side?" to "why is there a spacer at the bottom?")
I guess I could put a movable spacer on the right side by default tho to still allow for a component there below what would be possible on the left side, while still having both sides at the same height by default.

"Why is there a spacer at the bottom?" - Hence my suggestion to lock the bottom left slot, including an explanation as to why. But I can understand if that's not really desirable. However combined with the second spacer on the right side I could see this solution work.

Additional note: At some point there may be so many components that stacking them all up on one side will make the HUD more of an obstruction than being useful as it fills more and more of the middle of the screen (could happen sooner rather than later, again, depending on what you want to add). In that case, some components will undoubtedly get moved to the right side by the player, simply as to not obstruct their whole screen.

Well yeah, stacking higher than the card is not desirable and won't be done.
It's also why you can completely remove components from the hud, in case you don't need them and they are just cluttering your view.

In the sort of default max GUI size setting the card is already pretty huge (it's a lot better with one lower than the max size tho and at least most people I have seen that make videos or streams already use that setting anyways)