bs5 text wrapping in menu bar instead of collapsing

[abulgatz]

Did you use the FAQ section?

• Yes, I have read the FAQ and I found no solution/answer there.

Steps to reproduce

1. Load PrivateBin with Bootstrap 5 theme in Firefox
2. Resize the window width so it is narrow but the menubar doesn't collapse into a hamburger

What happens

The text in the buttons and inputs wraps onto multiple lines, making the menubar taller.

What should happen

The menubar should collapse

Additional information

I recommend adding the css class .text-nowrap either to the top-level <nav> element or to each of the the inputs in the <nav> to fix this issue.

Current menubar:

After adding .text-nowrap to the <nav>: <nav class="navbar navbar-expand-lg bg-body-tertiary text-nowrap">:

Basic information

Server address:

Server OS:

Webserver:

Browser: Firefox 125.0.3

PrivateBin version: 1.7.2

I can reproduce this issue on https://privatebin.net: No, as it is not using the new preview bootstrap 5 theme

[elrido]

Thanks, I've noticed it during development, but didn't figure out how to solve it. Assumed thats what they (bootstrap) had decided it is supposed to look like. The nowrap class probably got provided for good reasons.

[Ilav1]

Sorry for reopen the issue. There is more potential in bootstrap5 template. I recognised that the buttons are much bigger in bootstrap 5 theme so there are less informstion than before.

Here is an example of bootstrap 5 vs old designe taken on 10'' tablet.

At first, the checkboxes are not good to see, they should be darker in ligtheme.

You cant read or even see the password box or what kind of formate the paste is. The burningtime also isnt readable.
Maybe some options can go to a sidebar like in mobile view when the display gets smaller so that more and more options are switching to a dropdown menue. I dont know if its possible...

I think there should be an symbol in the grey new button shouldnt it?

//Edit
lol I dont know how to reopen an issue...

[elrido]

Reg. the missing symbols, check the CSP setting of your instance. I left a comment in the con.sample.php on needing to relax the rule to get the symbols to display correctly:

PrivateBin/cfg/conf.sample.php

Lines 98 to 99 in a0e42aa

	; - If you use the bootstrap5 theme, you must change default-src to 'self' to
	; enable display of the svg icons

For the display of the buttons, these do look quite different, space-wise, in bootstrap 5. I personally also don't like the "flat" look. I'm more than happy to change them using the bootstrap CSS provided classes, but want to avoid introducing too much custom CSS, which will be on us to maintain.

And just to check - Are you really looking at a 1.7.3 instance, which contains the above discussed improvements? It should now look like this:

What is also weird in your screenshot is that it looks like you enabled dark-mode, but it is clearly the light-mode that it displays.

[Ilav1]

Ok I don't read the info about the icons. Thanks for the informations works fine now.

The other screenshot was not 1.7.3 it was 1.7.1.

At least I like the bootstrap 5 designt because you can switch from light to dark mode but I don't like the look on medi / small displays.

Even on a laptop, when you open privatebin 1.7.3 the input field is so big you have to scroll down to see the footer. When I open the old theme I see everything without scrolling. Isn't it possible to set the input field with footer as big as the screen? When you have longer paste you may expane the input field.

[elrido]

Reg. the textarea height, we seem to have gotten some tools in bootstrap 5.3 that help with sizing relative to the viewport: https://getbootstrap.com/docs/5.3/utilities/sizing/#relative-to-the-viewport - we probably needed something like 75% or 80% or such and maybe only set these for larger screen heights? Anyhow we should probably move that into a new issue. Could you create a new issue with subject "bs5 textarea height" so we don't forget? I'll try and experiment with it over the weekend.