Learn more about these different git repos.
Other Git URLs
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.
<img alt="Screenshot_20230111_171012.png" src="/pagure/issue/raw/files/f6e0ae936a3ef80021bd9dccb81a08d4d7f36676b25177cd34d4d234f024d1a3-Screenshot_20230111_171012.png" />
<img alt="Screenshot_20230111_170841.png" src="/pagure/issue/raw/files/eb952623176f1b933bebe074c1810d050532697ba70bd7e5ffd07669e74d7a5d-Screenshot_20230111_170841.png" />
Ah nice investigative work!
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?
The theme is stored in this repo, I think
Indeed, I was to "vanilla pagure" focused...
Metadata Update from @wombelix: - Issue assigned to wombelix
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.
commit.html
col-2
col
flex-nowrap
<nav>
.enforce-text-break
word-wrap: break-word !important;word-break: break-all !important;
orphan-section
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.
<img alt="pagure_broken_commit_ui_before.png" src="/pagure/issue/raw/files/e8c936d01139f49e8de333d4584d53a0f78b70b63a79e43ff74689dc0135fe59-pagure_broken_commit_ui_before.png" /><img alt="pagure_broken_commit_ui_after.png" src="/pagure/issue/raw/files/d08a2d87946ca2482439a5eb0d50cb63f8077cac022dece142f8e6e768ec56c0-pagure_broken_commit_ui_after.png" />
Much better, great work @wombelix !
Commit c9bd2f2 fixes this issue
Log in to comment on this ticket.