This window occupies 50% of the FullHD screen height. Approximately 550px.
Of the useful information, I see 11 lines of text here. Exactly 50px per 1 line of text.
This is not normal.
There are many ways to differentiate a monitor from a phone screen in CSS.
It turns out that BW shows not the text, but the spacing between lines.
I see that approximately 70% of the area and height is emptiness, not information.
Maybe it’s the designers who have such an unhealthy love for
line-height: 2 … 2.5 ;
or
padding: 5vh;
You can take up the entire screen in different ways.
You can see that the value of each property is multiplied by the number of rows.
If the designer decides that the standard line-height: 1.5 is small and sets line-height: 2.5 , the window will end up being 2x the height of the standard 11-line height.
But personally, I am interested in information, but not the meaning hidden between the lines.
As a result, the window has scrolls. And users are forced to write new requests to make 1 line.
resize: vertical; /* both; */
(you can see how this string works when you will write answer to this topic)
Or reduce the font.
Requests will differ depending on the user’s CSS training
A recent design change gave us 3 standard window widths. The implementation of this gift is approximately 100 times more difficult than the above 1-line solution. And it took a lot of time.
The Bitwarden product design team has unfortunately latched on to “modern” design fads, which impose gratuitous margins and padding (and rounded corners), and it has repeatedly introduced “refreshed” UI designs that reduce information density in the browser extension viewport (e.g., in 2022 and 2024).
Yes, the trends are opposite. Websites try to convey as much “air” to the user as possible. But programs and applications, on the contrary, tend to Dark Mode and Compact Mode.
Nowadays many sites have a background-color property: #000; It’s black and has no options, no variables or color schemes. The color black on the website is unthinkable! For 20 years, humanity has been moving towards this, how many eyes have been killed, how many glasses have been bought.
There are programs with a variable interface (for example, Mozilla ThunderBird). And there are not 5 properties, there are 500. And all are mutable.
Now that the “3 widths” button has appeared, most of the work has already been done - this is the button itself. That’s 95% of the work. The remaining 5% accounts for:
– copy the button,
– come up with a name for the variable,
– find these 5 properties,
– insert a new variable into them.
This is all. you can do it in a day. And if you find the designer who wrote the insides of the logins, then in an hour including a liter of coffee.
Obviously, the developers want to make one interface for everyone: monitors and phones.
But now phones have 3 times more pixels in height than monitors. And the width is already like an HD screen.
I also believe that the layout should adapt itself to the screen, and without duplicating code.
The old ways with @media(), @container are duplication.
CSS must think for itself. It is actively developing. These geniuses from W3C must come up with something.
When I first started learning CSS, I immediately realized that vendor prefixes are a dead end. This is the opinion of a 1st year student. 3 years have passed and the whole world is cutting them out. Although they lived for at least 15 years. The one who invented them is a short-sighted criminal.
Even at that time they understood that a black screen does not destroys your eyes and your electricity bill. I read the History - this color:amber; Beautiful.
But then Steve Jobs came and made the whole world color:black;
… I really don’t want to disturb your harmony here… and wish you well - both of you – indeed… but if someone knows what the concrete request would be here… that might be helpful…just say’in…
it’s simple. In the settings, the “Compact Mode” button does not affect the pictures above. Everything has already been done. I wrote above about 95%. More has already been done.
We need to improve the interface and make “Compact Mode” influence on all UI elements
Red – general level.
Yellow – Compact Mode.
Green visible changes.
I can roughly estimate that only the property has changed
margin-top: 1.2em;
And not even everywhere, but only in selected lines. Or only one block “Expansion width“ + Common block.
margin: 0 1.2em 0;
I don’t see anything different, no matter how hard I try.
This is either an abandoned hack job or a job at the beginning.
If the developers have already made a working Compact Mode, and it works on 2 properties of this window, then introducing the same 1 variable into this entire window takes half an hour.
And the effect can manifest itself throughout BW’s UIIt can be seen that the changes are approximately 20% of the intervals. What if the user wants 50%? So that there is a real Compact Mode, and not its appearance?
Here Compact Mode does not affect the font size. This means that for intervals you can set not 20% change, but 100%.
Compact Mode suggests that when it is turned on, there is more space for lines of information. The design effect comes last here. If instead of 5 strings I see 6, then it is not Compact Mode.
