Issue #5353: Specific commit breaks UI - pagure

pagure

#5353 Specific commit breaks UI

Closed: Fixed a year ago by ngompa. Opened a year ago by justinz.

https://src.fedoraproject.org/rpms/kdevelop-python/c/b3f323ca0f5ef9d28a6a867836274b83bfedb290?branch=rawhide

This commit breaks the UI, the menu is shown first, then the commit changes under, instead of to the right of the menu.

I don't think it's related to this, or any other, specific commit, the behavior is the same even when I open the first one (https://src.fedoraproject.org/rpms/kdevelop-python/c/fc6cad12628afb62fe7da7cee28ae76d0d6eb9cb?branch=rawhide)

It's caused by the Text "Orphaned for: Fails to build from source -- https://bugzilla.redhat.com/1898116", it's width cause the layout to break, when I remove it temporary via the browser developer tools, everything went back to normal.

wombelix commented a year ago

justinz commented a year ago

Ah nice investigative work!

wombelix commented a year ago

So I think it's not really a pagure bug and we can close this Issue? @justinz

justinz commented a year ago

So I think it's not really a pagure bug and we can close this Issue? @justinz

If it's not a pagure bug where does it need to be reported?

ngompa commented a year ago

The theme is stored in this repo, I think

wombelix commented a year ago

The theme is stored in this repo, I think

Indeed, I was to "vanilla pagure" focused...

Metadata Update from @wombelix:
- Issue assigned to wombelix

a year ago

wombelix commented a year ago

I was digging a little deeper into the problem. It occurs because the left column (let's call it nav) has the attribute "col", which allows to grow in width if required, e.g. by a long text. The right column (let's call it content) is set to "col-10". The bootstrap grid allows 12 columns per row, when the nav grows and consume more than 2 columns of the grid, the total will be > 12 and therefore cause a break, so the content will shown below the nav seen in https://src.fedoraproject.org/rpms/kdevelop-python/c/b3f323ca0f5ef9d28a6a867836274b83bfedb290?branch=rawhide.

I played around a little but couldn't find the perfect solution, which doesn't break anything existing but gracefully handles such edge case with a very long word in the nav bar, yet.

I created a PR (https://pagure.io/pagure/pull-request/5363) which contains what I could so far identify as potential workaround: It set's the nav in the commit.html template to a fixed size of col-2 (was col so far), that way nav and content always stay side by side. Adding flex-nowrap to the <nav> tag solves that the width still overlaps with the content and adding a news CSS class .enforce-text-break (word-wrap: break-word !important;word-break: break-all !important;) to the orphan-section div enforces a line break of long words, in this example an URL.

I attached before and after Screenshots, the result isn't pretty but functional, the information is still fully visible but doesn't affect the content.