Customizable Window Size for Browser Extension

The issue of window size is discussed here. For some reason, there are already proposals to limit users to only three sizes - low, medium, and high.
I note that I have never seen such an implementation – 3 sizes. And I imagine that it needs to be done, and spend time on it. We need new items in the settings. And it’s much more complicated than in the video. We need to do some research - what are the screen sizes already? Didn’t work out like this: is the size “High” at 40% of the screen? :slight_smile:

In the video, the standard window is most likely implemented by the browser itself. That is, no effort is required from the developers.

This video was shot a long time ago and for a different software. And 3 problems are shown in the browser.

It’s funny and bitter – there are two different window implementations within the same browser.
And if you think that the developers have chosen the best and easiest ? No. :slight_smile:
Only their users can do this. And by the way, several users have already implemented this flexible window for themselves, at home, through simple CSS (but this is not accurate).

The video portion for the window size is great for BITWARDEN.
I’m giving a short cut to prevent accusations that 4 minutes is a long time.

Only 47 sec applies to BITWARDEN, for the rest you can read the description on YT.

If I were asked, which do you choose: limited “3 sizes” or a flexible window?
My choice is obvious: flexible window.

I remember seeing it somewhere by chance : a resizable window – it’s easy. The first response from ChatGPT

Summary
.resizable-window {
  width: 300px; 
  height: 200px; 
  border: 2px solid #ccc; 
  padding: 10px;
  overflow: auto; /* Scroll */
  resize: both; /* <<<<======== */
  position: relative; /* for positining of Handle */
  background-color: #f9f9f9;
}

/* Handle at down-right  corner  */
.resizable-window::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px; 
  height: 20px;
  background-color: #ccc;
  cursor: se-resize;
  border-top: 2px solid #fff; /* Decor */
  border-left: 2px solid #fff;
}

.content {
  width: 100%;
  height: 100%; }