Jetbrains Compose Desktop Elements Overlap

Issue

I am writing a compose desktop app. I have a main window:

Window(size = IntSize(600, 600)) {
    // snip logic

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        ChessBoard(board.value, modifier = Modifier.fillMaxWidth(0.8f))
        Row(modifier = Modifier
            .fillMaxSize(), horizontalArrangement = Arrangement.SpaceEvenly) {
            Button(onClick = previousBoard) {
                Text("<")
            }

            Button(onClick = nextBoard) {
                Text(">")
            }
        }
    }
}

Where ChessBoardis defined as

@Composable
fun ChessBoard(board: Board, modifier: Modifier = Modifier) {
    Canvas(modifier = modifier) {
        // snip logic, I checked that it does not influence the result
    }
}

The chessboard takes up the correct amount of space, but the buttons overlap and aren't added at the bottom as expected.

I tried tweaking the modifiers on ChessBoard, but that did not change the fact that the buttons are at the top.

Solution

On the Row, remove the Modifier.fillMaxSize()

I think what you need is Modifier.fillMaxWidth()

The Row is taking up the entire space of the screen, and the buttons inside the row, by default stay at the top of the row. To check that this is the case, try adding a Modifier.align(CenterVerticlly) to the row, and the buttons will move to the center of the screen, since the row is still occupying the whole screen. Removing the Modifier.fillMaxSize() should do it, but if you still want to keep it for other Composables, use Modifier.align(Alignment) to fix it

Answered By - MARSK