[Core] broken interaction of layout.childGap and border.betweenChildren

[bullyingteen]

You should be able to reproduce it with a simple layout but I will post the code from the image as well.

static const Clay_Color RED = {255,0,0,255};
static const Clay_Color BLACK = {15,15,15,255};
static const Clay_Color DARKGRAY = {60,60,60,155};
static const Clay_Color GRAY = {120,120,120,255};
static const Clay_Color LIGHTGRAY = {200,200,200,255};
static const Clay_Color WHITE = {240,240,240,255};
static const Clay_Color TRANSPARENT = {0,0,0,0};

void Test_Borders() {
    CLAY(CLAY_ID("Grid"),
        CLAY_LAYOUT({ 
            .sizing = (Clay_Sizing){ CLAY_SIZING_GROW({0}), CLAY_SIZING_GROW({0}) }, 
            .layoutDirection = CLAY_TOP_TO_BOTTOM, 
            .padding = { 50, 50 }, .childGap = 50 }),
        CLAY_SCROLL({ .vertical = true }),
        CLAY_BORDER({ .betweenChildren = {2, .color = LIGHTGRAY } }),
        CLAY_RECTANGLE({ .color = GRAY })//, .cornerRadius = CLAY_CORNER_RADIUS(50) })
    ) {
        CLAY(
            CLAY_IDI("Grid_Row", 0),
            CLAY_LAYOUT({ 
                .sizing = (Clay_Sizing){ CLAY_SIZING_GROW({0}), CLAY_SIZING_GROW({0}) }, 
                .layoutDirection = CLAY_LEFT_TO_RIGHT, 
                .padding = { 0, 0 }, .childGap = 50 }),
            CLAY_BORDER({ .betweenChildren = {2, .color = LIGHTGRAY } }),
            CLAY_RECTANGLE({ .color = TRANSPARENT })//, .cornerRadius = CLAY_CORNER_RADIUS(50) })
        ) {
            CLAY(
                CLAY_ID("Border_Test1"),
                CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_FIXED(400) } }),
                CLAY_BORDER_ALL_RADIUS(20, DARKGRAY, 50),
                CLAY_RECTANGLE({ .color = RED, .cornerRadius = CLAY_CORNER_RADIUS(50) })
            ) {}

            CLAY(
                CLAY_ID("Border_Test2"),
                CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_FIXED(400) } }),
                CLAY_BORDER({ .left = {20, DARKGRAY}, .cornerRadius = { .topLeft = 50 } }),
                CLAY_RECTANGLE({ .color = RED, .cornerRadius = CLAY_CORNER_RADIUS(50) })
            ) {}

            CLAY(
                CLAY_ID("Border_Test3"),
                CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_FIXED(400) } }),
                CLAY_BORDER({ .top = {20, DARKGRAY}, .cornerRadius = { .topLeft = 50 } }),
                CLAY_RECTANGLE({ .color = RED, .cornerRadius = CLAY_CORNER_RADIUS(50) })
            ) {}

        }
    
        CLAY(
            CLAY_IDI("Grid_Row", 1),
            CLAY_LAYOUT({ 
                .sizing = (Clay_Sizing){ CLAY_SIZING_GROW({0}), CLAY_SIZING_GROW({0}) }, 
                .layoutDirection = CLAY_LEFT_TO_RIGHT, 
                .padding = { 0, 0 }, .childGap = 50 }),
            CLAY_BORDER({ .betweenChildren = {2, .color = LIGHTGRAY } }),
            CLAY_RECTANGLE({ .color = TRANSPARENT })//, .cornerRadius = CLAY_CORNER_RADIUS(50) })
        ) {
            
            CLAY(
                CLAY_ID("Border_Test4"),
                CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_FIXED(400) } }),
                CLAY_BORDER({ .bottom = {20, DARKGRAY}, .cornerRadius = { .bottomLeft = 50 } }),
                CLAY_RECTANGLE({ .color = RED, .cornerRadius = CLAY_CORNER_RADIUS(50) })
            ) {}

            CLAY(
                CLAY_ID("Border_Test5"),
                CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_FIXED(400) } }),
                CLAY_BORDER({ .right = {20, DARKGRAY}, .cornerRadius = { .bottomRight = 50 } }),
                CLAY_RECTANGLE({ .color = RED, .cornerRadius = CLAY_CORNER_RADIUS(50) })
            ) {}

            CLAY(
                CLAY_ID("Border_Test6"),
                CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_FIXED(400) } }),
                CLAY_BORDER({ .right = {20, DARKGRAY}, .left = {20, DARKGRAY}, .cornerRadius = CLAY_CORNER_RADIUS(50) }),
                CLAY_RECTANGLE({ .color = RED, .cornerRadius = CLAY_CORNER_RADIUS(50) })
            ) {}
        }
    }
}

[nicbarker]

I've put in a fix for this here 208c7cb, please let me know if it works for you 🙂

[programadorthi]

I have a 1080x1920 mobile screen and still having the same issue rendering your Youtube video sample:

CLAY(
            CLAY_ID("OuterContainer"),
            CLAY_RECTANGLE({.color = {.r = 43, .g = 41, .b = 51, .a = 255}}),
            CLAY_LAYOUT({
                                .layoutDirection = CLAY_TOP_TO_BOTTOM,
                                .sizing = layoutExpand,
                                .padding = {16, 16},
                                .childGap = 16
                        })
    ) {
        CLAY(
                CLAY_ID("HeaderBar"),
                CLAY_RECTANGLE(contentConfig),
                CLAY_LAYOUT({
                                    .sizing = {
                                            .width = CLAY_SIZING_GROW(),
                                            .height = CLAY_SIZING_PERCENT(0.1)
                                    },
                                    .padding = {16},
                                    .childGap = 16,
                                    .childAlignment = {
                                            .y = CLAY_ALIGN_Y_CENTER
                                    }
                            })
        ) {
            RenderHeaderButton(CLAY_STRING("File"));
            RenderHeaderButton(CLAY_STRING("Edit"));
            RenderHeaderButton(CLAY_STRING("Upload"));
            RenderHeaderButton(CLAY_STRING("Media"));
            RenderHeaderButton(CLAY_STRING("Support"));
        }
        CLAY(
                CLAY_ID("LowerContent"),
                CLAY_LAYOUT({.sizing = layoutExpand, .childGap = 16})
        ) {
            CLAY(
                    CLAY_ID("Sidebar"),
                    CLAY_RECTANGLE(contentConfig),
                    CLAY_LAYOUT({
                                        .sizing = {
                                                .width = CLAY_SIZING_FIXED(250),
                                                .height = CLAY_SIZING_GROW()
                                        }
                                })
            ) {}
            CLAY(
                    CLAY_ID("MainContent"),
                    CLAY_RECTANGLE(contentConfig),
                    CLAY_LAYOUT({.sizing = layoutExpand})
            ) {}
        }
    }

The result boudingBox values to the HeaderBar Rectangle:

Clay_BoundingBox boundingBox = renderCommand->boundingBox;
float x = boundingBox.x; // 16
float y = boundingBox.y; // 16
float width = boundingBox.width; // 1048? Why 1080 -16 - 16?
float height = boundingBox.height; // 187.199997? 10% of 1920 is 192

I'm solving adding x and y to width and height:

Clay_BoundingBox boundingBox = renderCommand->boundingBox;
float x = boundingBox.x; // 16
float y = boundingBox.y; // 16
float width = boundingBox.width + x; // 1064
float height = boundingBox.height + y; // 203.199997

Yes, I'm at 208c7cb commit.