imagebox shrinking on mainbox when I don't want it to.

[Momijie]

I'm having a bit of trouble with the sizing of the components in the mainbox. When I reduce the number of lines in my listview, the height of the imagebox shrinks. Also, for example: whenever I increase the spacing of a component within the mainbox, it skews the height of the imagebox.

configuration {
    display-run:                "ラン";
    display-window:             "まど";
    display-ssh:                "シェル";
    display-drun:               "アプリ";
}

* {
    bg-col:                     #1e1e2e;
    bg-col2:                    #11111b;
    border-col:                 #1e1e2e;
    selected-col:               #6C7086;
    blue:                       #89b4fa;
    fg-col:                     #cdd6f4;
    fg-col2:                    #f38ba8;
    grey:                       #6c7086;

    font:                       "FiraCode Nerd Font 14";
}

window {
    width:                      425px;
    border:                     2px;
    background-color:           @bg-col2;
}

mainbox {
    spacing: 4px;
    children:                   ["imagebox","inputbar", "listview"];
}

inputbar {
    background-color:           @bg-col;
    text-color:                 @fg-col;
    children:                   ["entry"];
}

listview {
    spacing: 4px;
    scrollbar:                  false;
    border:                     0px;
}

element {
    padding:0px;
    children: ["element-text"];
}

element-text {
    background-color:           @bg-col;
    text-color:                 @fg-col;
}

element-text selected {
    background-color:           @selected-col;
}

entry {
    placeholder: "Search";
    text-color:                 @fg-col;
}

imagebox {
    background-color:           transparent;
    background-image:           url("~/Pictures/profile_pictures/satori-cute.png",width);
    children:                   ["dummy","mode-switcher"];
    border-radius:              5px;
}

button {
    padding:                    3px;
    border-radius:              10px;
    margin:                     40px 20px 15px 10px;
    background-color:           #1e1e2e;
    text-color:                 @fg-col;
}

button selected {
    background-color:           @selected-col;
}

You can see the problem in the images below that when listview has lines set to 5 it breaks the desired look.
https://imgur.com/a/7lzeCkp

[DaveDavenport]

how you pack the widgets (expanding rules) imagebox will be equal size to listview.
You can fix this with:

imagebox {
expand: false;
}

The nforce the right height with setting f.e. padding on 'dummy'.

dummy {
expand: true;
padding: 50px;
}

(Also add

@import "default"

at top of theme to have it load correctly standalone given you are on recent version).

[Momijie]

Thank you so much for the quick reply, it works perfectly of course.