Page MenuHomeSoftware Heritage

Source code view should span full browser width
Closed, ResolvedPublic

Event Timeline

rdicosmo triaged this task as High priority.Jun 16 2020, 2:07 PM
rdicosmo created this task.

Fortunately, this is already the case.

I can not reproduce locally. I think this is due to your browser cache.

Is refreshing the page with Ctrl+F5 fixes the display ?

Fortunately, this is already the case.

I can not reproduce locally. I think this is due to your browser cache.

Is refreshing the page with Ctrl+F5 fixes the display ?

To reproduce, enlarge the browser window: if the browser width is small enough, the source code pane wraps below and uses all the available space.
In my case, I'm using a full screen on a 2560 pixel display

To reproduce, enlarge the browser window: if the browser width is small enough, the source code pane wraps below and uses all the available space.
In my case, I'm using a full screen on a 2560 pixel display

The unwanted behaviour triggers somewhere around 1600 pixels on my screen; since I'm using larger fonts, this may trigger below 1600 pixel width on other laptops

After some other tests, it seems this mostly happens with Chrome: you can trigger the behaviour by playing with Ctrl + and Ctrl -
Firefox seems much more resilient.

Ok got it. I think this is the normal behavior when using bootstrap CSS framework. I need to dig further on this to see if we can mitigate the issue.

For the record, the same kind of rendering is obtained when browsing Github and playing with the browser zoom.

I thought back about the issue while walking outside and something came back to my mind. Bootstrap has a dedicated CSS class for full width display. This seems to effectively fix the observed issue on high resolution screens. I need to deeper test the change before pushing a diff.

For the record, the same kind of rendering is obtained when browsing Github and playing with the browser zoom.

Well, so we'll be better than GitHub :-)

anlambert added a comment.EditedJun 16 2020, 6:22 PM

So after a few tests, I think the best option is to keep the current standard behavior by default as full width rendering is not always required (especially for standard screen resolutions).

So I propose to add a "Full width" switch in the top left part of the Web UI enabling to activate / deactivate full width rendering.
The current switch value will be saved in browser local storage in order to restore same rendering behavior when loading each
webapp page.

anlambert changed the task status from Open to Work in Progress.Jun 16 2020, 6:23 PM
anlambert added a project: 2019 UX audit.
anlambert moved this task from Backlog to Work in progress on the 2019 UX audit board.

Better. but not yet there... if you play with Ctrl+ Ctrl- a bit you'll see that the source code pane still ends up having a size controlled by the central part of the top bar that show the path

anlambert reopened this task as Open.EditedJun 17 2020, 12:19 PM

D3295 did not fix the issue, reopening the task.

Alright, this is clearly related to changing the default font size in browser preferences. It seems like our stylesheets do not handle that case really well.

anlambert moved this task from Deployed to Backlog on the 2019 UX audit board.Jun 17 2020, 1:32 PM

T2457 created for stylesheets improvements regarding font size.

anlambert moved this task from Backlog to Done on the 2019 UX audit board.Jun 18 2020, 11:06 AM
anlambert edited projects, added UX; removed 2019 UX audit.Jun 18 2020, 11:50 AM