[Core] Borders draw back to front and don't shrink child elements

[mikejsavage]

CLAY( CLAY_LAYOUT( { .sizing = { .width = CLAY_SIZING_FIT( 1000.0f ), .height = CLAY_SIZING_FIT( 1000.0f ) } } ), CLAY_FLOATING( { { 50, 50 } } ) ) {
    CLAY( CLAY_LAYOUT( { .sizing = { .width = CLAY_SIZING_FIXED( 200.0f ), .height = CLAY_SIZING_FIXED( 200.0f ) } } ), CLAY_BORDER_ALL( { 10, { 255, 0, 0, 255 } } ) ) {
        CLAY( CLAY_LAYOUT( { .sizing = { .width = CLAY_SIZING_PERCENT( 1.0f ), .height = CLAY_SIZING_PERCENT( 1.0f ) } } ), CLAY_BORDER_ALL( { 10, { 0, 255, 0, 255 } } ) ) { }
    }
};

i.e., a box with a green border inside a box with a red border draws the red border only:

So the parent element is being drawn on top of the child, and borders don't shrink their children to fit, which you can't generally correct for yourself by adding padding because you can set borders per edge but padding is per axis.

[nicbarker]

Hello, sorry for taking a while to get to this. It's an (unfortunately) undocumented part of Clay's drawing sorting that parent borders are drawn over the top of children, although it would definitely make sense to give the user a bit more control over this (I think perhaps I got the default behaviour wrong, and insetting the children i.e. border + padding is the correct default)

On the second note though, I will merge a PR either today or tomorrow to provide 4 padding values (top, right, bottom, left) rather than just two, so that might give you something to work with in the meantime 🙂