Issue #5353: Specific commit breaks UI - pagure

pagure

#5353 Specific commit breaks UI

Closed: Fixed Jan 14, 2023 by ngompa. Opened Dec 22, 2022 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.

wombelix commented Jan 11, 2023

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 Jan 11, 2023

justinz commented Jan 12, 2023

Ah nice investigative work!

wombelix commented Jan 12, 2023

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

justinz commented Jan 12, 2023

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 Jan 13, 2023

The theme is stored in this repo, I think

wombelix commented Jan 13, 2023

The theme is stored in this repo, I think

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

Metadata Update from @wombelix:
- Issue assigned to wombelix

Jan 13, 2023

wombelix commented Jan 13, 2023

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.