fix(coral): Filters width rendered in TableLayout is too small

[mathieu-anderson]

What happened?

The filer components rendered in TableLayout often end up to small in width, which leads to overlapping of content with possible icons in fields (most noticeable in dropdown fields):

What did you expect to happen?

The filters should take an appropriate amount of space to avoid such visual issues.

One solution would be to rewrite the flex styles here in this way:

     <Box.Flex
        flexDirection={"row"}
        flexWrap={"wrap"}
        alignItems={"center"}
        justifyContent={"space-between"}
        colGap={"l1"}
        marginY={"l1"}
      >
        {filters.map((element) => {
          return (
            <Box.Flex
              key={element.key}
              flexDirection={"column"}
              flex={"1 0 auto"}
            >
              {element}
            </Box.Flex>
          );
        })}
      </Box.Flex>

This gives us this result:

Screen.Recording.2023-10-25.at.11.11.30.mov

However, this should be tested, and another solution may be better.

[RANJEETJ06]

@mathieu-anderson can be assigned to me ?

[mathieu-anderson]

Yes, I assigned it to you. Thank you!

[Reene-Simon]

@mathieu-anderson Could you please assign this issue to me? I would love to work on this issue as one of my first issues.

[mathieu-anderson]

@Reene-Simon , @RANJEETJ06 is already working on it, but if he doesn't open a PR in a reasonable timeframe, I will assign it to you

[mathieu-anderson]

@Reene-Simon, @RANJEETJ06 has not opened a PR, and today is the last day of Hacktoberfest. So you may open a PR yourself if you are still up for it ^^

[Reene-Simon]

@mathieu-anderson sorry but I won't be able to do it today as I'm not familiar with the application and its setup on my local device. I'm a newbie and don't have quite a lot of experience in the same. Honestly, I thought the issue could be fixed with CSS hence I requested to be assigned. But the whole setup looks quite intimidating. I would be open to trying it out in the near future after understanding everything that is being used here and surely contribute to this repo as it does look quite interesting.

[mathieu-anderson]

@Reene-Simon no worries, take it at your own pace, and don't hesitate to ask questions. You don't have to open the PR today ^^

[Reene-Simon]

@mathieu-anderson yeah sure. Thanks for the opportunity. It will truly be a learning experience for me.

[mathieu-anderson]

@Reene-Simon I'm sorry, I opened a PR for this as we need it to render a specific UI for a new feature! #1991

[Reene-Simon]

@mathieu-anderson it's okay. I will surely try to contribute in the future to this repo.