Support fill = true on column for min_width

[SwayKh]

Discussed in https://github.com/Saghen/blink.cmp/discussions/414

^{Originally posted by SwayKh December 1, 2024} So, I like to have a bigger min_width of my cmp menu, so that the menu doesn't keep bouncing around in sizes based on the length of suggestion.

According to the README, you can align the columns with width.fill property of the component, but it doesn't seem to be working for me.

This is my config

      min_width = 35,
      draw = {
        columns = { { "kind_icon" }, { "label", "label_description", gap = 1 }, { "kind" } },
        components = {
          kind = { width = { fill = false } },
          kind_icons = { width = { fill = false } },
          label = { width = { fill = true } },
          label_description = { width = { fill = true } },
        },
      },

With this config, what I think it should be like is, having "kind_icons" "label" "label_description" on one side of the menu, and have the "kind" component should align with the right side. Or Am I doing something wrong.

But right now, the menu is just like regular menu, with everything aligned on left side, and a huge chunk of empty space on the right. But I want the chunk of space to be between label and kind components.

For context, this is what is looks like,

[saghen]

Extra context from the discussion:

Setting width.fill effectively makes the components that come afterwards, in the same column, right aligned. So you likely want

draw = {
  columns = { { "kind_icon" }, { "label", "label_description", "kind", gap = 1 } },
  components = {
    label = { width = { fill = false } }, -- default is true
    label_description = { width = { fill = true } },
  },
},

Although, I'm not sure we handle the min_width property for filling. If it's still not working, open up an issue and I can take a look

[ahmedelgabri]

Thanks, @Saghen. I was also looking for this, but do you know why some of them are misaligned like this sometimes?

[disrupted]

I cannot get the right alignment working reliably for the last component.

Here's an example

draw = {
    columns = {
        {
            'label',
            'label_description',
            'kind_icon',
            gap = 1,
        },
    },
    components = {
        label_description = {
            width = {
                -- make component after it in the same group right-aligned
                -- FIXME: does not seem to work reliably
                fill = true,
            },
        },
    },
}

it does work in some cases though

[saghen]

Set the width = { fill = true } on the component that comes before the one you want to right align

[disrupted]

Set the width = { fill = true } on the component that comes before the one you want to right align

that's what I did though in my example above. I want both label_description and kind_icon to be right-aligned so I set fill=true for label (default there) and label_description