Create repo page automatically scrolls down

[axifive]

• Gitea version (or commit ref): 1.16.0+dev-195-gb6c752e91
• Git version: -
• Operating system: -
• Browser: Desktop Opera/Chrome, Chrome Mobile
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes https://try.gitea.io/repo/create
  • No
• Log gist:

Description

Noticed that when opening the repo create page it quickly shows breaking layout and then automatically scrolls down.

Screenshots

[wxiaoguang]

The bug is more obvious in Chrome.

Some guess:

The page layout may be wrong (eg: tag mismatching), or the HTML output is not smooth (eg: incomplete HTML strucutre)

So the rendered page may appear in some intermediate state (see the screen shot), then page height is very large.

Then when the page is completely rendered, Chrome tries to adjust the scrolling position during rendering. Then the page becomes what you have seen.

The screenshot about a partially rendered page. (although the page will be rendered correctly finally).

[silverwind]

Is there some reliable way to get the partial rendered state? I tried with DevTools network throttling but it switches to regular layout too fast for me to pause the page.

[axifive]

@silverwind Try disable

.ui.grid>.column:only-child, .ui.grid>.row>.column:only-child {
    /* width: 100%; */
}

And this property is applied before it:

.ui.grid>.column:not(.row),.ui.grid>.row>.column {
    width:6.25%;
}

[wxiaoguang]

Agree axifive.

The problem is caused by mis-used fomantic layout.

Old code:

<div class="ui middle very relaxed page grid">
   <div class="column">

The inner column has a width: 6.25% by .ui.grid>.column:not(.row),.ui.grid>.row>.column {

When Chrome is loading page, before <div class="column"> ends, Chrome won't apply the :only-child.

I think the correct layout should be something like:

<div class="ui middle very relaxed page one column grid">
   <div class="column">

With one column grid (https://fomantic-ui.com/examples/grid.html) , the inside column has width 100%.

[silverwind]

Fomantic's grid system is incredibly hacky (negative margins everywhere and the width issue above during page load), I hope we can get rid of it eventually, but I'd be okay with doing a short-term fix now.

I guess this won't be the only page with such an issue.

[wxiaoguang]

Yes, I have the same feeling. Fomantic was born very early, so what it did was already the best it could do.

Other pages may not be affected because only this page has a very long list.