Refactor branch list to flexbox

[denyskon]

Use existing flex-item elements.

Before:

After:

Replace #29620
Close #27469

[wxiaoguang]

I believe it needs grid, but not flex .... Or table+scrollbar, just like GitHub

Otherwise, multiple lines would mis-align.

[denyskon]

I think flex works just fine for it. If we use grid, it will be very hard to make it responsive, and I don't think table looks good.

[denyskon]

What we might do in the future is replacing the button row with overflow-menu, but for it to work properly changes to the menu need to be made, this is out of scope.

[wxiaoguang]

If we use grid, it will be very hard to make it responsive

Grid is designed for responsive layout, and we already used it on many pages.

The flex makes UI look misaligned:

[denyskon]

Imo the problem is this bar thingy, it will look odd either ways because as always one side of it is a lot shorter than the other, it looks like wrong spacing. I would abolish it all together as it is neither intuitive nor very informative.

[wxiaoguang]

IMO flex & grid have different use cases:

• If the content has no more than 2 columns, or only one column needs to grow/shrink, then it's good to use flex
• If the content has 2 columns or more, and it has not only one column that needs to grow/shrink, or it needs to align some columns, then it needs grid

I think the "branch list" is the second case.

[wxiaoguang]

And here is GitHub Copilot's answer:

for a list in HTML, when to use flexbox, when to use gridbox?

• Use Flexbox when:

  You want a 1-dimensional layout (either in a row or a column). Example: A horizontal nav bar (ul > li { display: flex; }), or a vertical list with custom spacing.
  You care about alignment and distribution along a single axis. Example: Even spacing between items, centering, or making all items the same height in a row.
  You want items to wrap when there’s not enough space (using flex-wrap).
  You need to reorder items easily (using order).

• Use Grid when:

  You want a 2-dimensional layout (both rows and columns). Example: A gallery or dashboard, where items should be arranged in a grid.
  You need more complex alignment across both axes. Example: Lists that need both horizontal and vertical alignment, or items that span multiple rows/columns.
  You want precise control over placement, sizing, and spacing in both directions.

Summary Table

Use Case	Flexbox	Grid
1D layout (row or column)	✅ Best choice	Possible, but not ideal
2D layout (rows & columns)	Possible, but limited	✅ Best choice
Simple alignment/distribution	✅	✅
Complex item placement (spanning, etc.)	🚫	✅
Wrapping items onto new lines	✅	✅
Equal width/height in one direction	✅	✅

[silverwind]

Both grid and flex will work, but grid is probably more well-suited to render such a table.

[wxiaoguang]

Both grid and flex will work, but grid is probably more well-suited to render such a table.

But I don't see how flex could layout this UI (#34889 (comment)) well ....

[silverwind]

Both grid and flex will work, but grid is probably more well-suited to render such a table.

But I don't see how flex could layout this UI (#34889 (comment)) well ....

Would need to give the elements a static width at least so the content aligns, it's going to be ugly with flex.

[wxiaoguang]

Both grid and flex will work, but grid is probably more well-suited to render such a table.

But I don't see how flex could layout this UI (#34889 (comment)) well ....

Would need to give the elements a static width at least so the content aligns, it's going to be ugly with flex.

So #34889 (comment): the flex layout doesn't work well with a list with at least 2 flexible columns.

[wxiaoguang]

By the way, if we'd like to add the gap here (a framework level change), then we need to check other places and remove unnecessary patches like below, otherwise the space doubles.

[denyskon]

I will double-check tomorrow, maybe a combination of flex and grid could fit best

[wxiaoguang]

I will double-check tomorrow, maybe a combination of flex and grid could fit best

FYI, there are some approaches to mix different layouts. For example:

<div line>
   <div first>
   <div combined>
      <div second>
      <did third>
    </div>
</div>

You can have line with 3 grid columns by setting combined to "display: contents" for wide screen, and have line with flex rows by setting combined to "display: (other)" for narrow screen.