fixed the dropdown menu for the top New button to expand to the left

[kerwin612]

before:

after:

[silverwind]

Not sure if this method is really something Fomantic supports officially, but if it works, we can go with it. I think we solved past cases via manual CSS.

[silverwind]

Actually fix is correct, I checked the CSS, there are two rules which left-align .menu.left.

[silverwind]

Unfortunately this introduced a regression where the menu flashes on page load. Will investigate later. It needs a fix similar to #30215.

[kerwin612]

Unfortunately this introduced a regression where the menu flashes on page load. Will investigate later. It needs a fix similar to #30215.

https://discord.com/channels/322538954119184384/322910365237248000/1248480303719252029 Can we discuss it?

[silverwind]

Not right now, but to explain the issue: There is this CSS:

.ui.menu:not(.vertical) .left.item,
.ui.menu:not(.vertical) .left.menu {
  display: flex;
}

Dropdown menus are hidden on page load via

.ui.dropdown .menu {
  display: none;
}

Above selector has more specificity so dropdown shows before JS has loaded which takes a few milliseconds usually. Once JS loads, it hides the menu via hidden class.

Maybe as a more general solution we can remove the first CSS, but I'm not sure whether there would be side effects of doing that.

Fix is in #31281.

[kerwin612]

Maybe it could be changed like this?:

.ui.dropdown .menu {
  display: none!important;
}

[silverwind]

I don't think it's worth the time trying to make left menu work. Fomantic only specifies left/right classes to indicate the direction in which child menus open, not the root menu:

https://fomantic-ui.com/modules/dropdown.html#menu-direction

So a left menu is essentially not supported and that is already shady territory and any attempt trying to make it work is likely to introduce regressions in other dropdowns which have very brittle CSS.

So I suggest you leave it be and find some other areas to work on :)

[kerwin612]

OK, I changed it because I saw this code:

gitea/web_src/fomantic/build/semantic.js

Line 5291 in ab1948d

leftward : 'left',

gitea/web_src/fomantic/build/semantic.js

Line 3796 in ab1948d

if(!module.is.leftward($menu) && !module.can.openRightward($menu)) {

gitea/web_src/fomantic/build/semantic.js

Line 4528 in ab1948d

leftward: function($subMenu) {

OK, that's the end of the suggest.