feat: allow resize the dialogbox for bigger/hidpi screens

[Monirzadeh]

this pull request try to improve UX in wide screen or High-resolution display.
it should close #731
for now it is not complete yet,

TODO:

• resize box
• just active when display is bigger than full HD
• remove max-width or change that to 800px if resize box is active

Things we don't decide about them yet

• should new resize size remmeber?

[fmartingr]

Check this:

diff --git internal/view/assets/less/custom-dialog.less internal/view/assets/less/custom-dialog.less
index f55a95c..243775a 100644
--- internal/view/assets/less/custom-dialog.less
+++ internal/view/assets/less/custom-dialog.less
@@ -19,18 +19,18 @@
        z-index         : 10001;
        background-color: rgba(0, 0, 0, 0.6);
        padding         : 32px;
-    resize          : both;
 
        .custom-dialog {
                display         : flex;
                flex-flow       : column nowrap;
                width           : 100%;
-               max-width       : 400px;
+               max-width       : 60vw;
                min-height      : 0;
-               max-height      : 100%;
+               max-height      : 70vh;
                overflow        : auto;
                background-color: var(--contentBg);
                font-size       : 16px;
+               resize          : both;
 
                .custom-dialog-header {
                        padding         : 16px;
@@ -54,6 +54,7 @@
                        align-content        : start;
                        align-items          : baseline;
                        grid-gap             : 16px;
+                       flex-grow            : 1;
 
                        &::after {
                                content          : "";

Also I got notice that we need to maintain both less and css, since there's no compiler in between. Maybe we can use less directly in the browser, do you want me to address that?

And I think we need to properly format the less files as well, my formatter edits all lines when saving because of all that space to align vertically.

[Monirzadeh]

Also I got notice that we need to maintain both less and css, since there's no compiler in between. Maybe we can use less directly in the browser, do you want me to address that?

it will be awesome if you can do that. i change that manually for proof of concept.

is not better if we set width : 20%; instead of max-width : 400px; or max-width : 60vw;?
i mean instead of max-widh we use width
should we limit height and width?

[Monirzadeh]

+                       flex-grow            : 1;

i think i should fix this.

Update:
maybe it is a little better. i don't like that empty space but not find a better solution yet.

[Monirzadeh]

wait for #735

[fmartingr]

```diff
+                       flex-grow            : 1;

i think i should fix this.

Update:
maybe it is a little better. i don't like that empty space but not find a better solution yet.

Make it so the start size is the same as always, leaving the option to users to resize it to a larger viewport.

[Monirzadeh]

@maxmeyer please test this.
make start dialog box on 400 px but have option to resize.
please test that and send a feedback.

[Monirzadeh]

@fmartingr do we need anything else?

[Monirzadeh]

hi i just keep initiate size 400px for non mobile device (a little wider).
downside: we can't change minimum size less that 400px

update: remove unneeded custom-dialog.css

[Monirzadeh]

@fmartingr two change for better result

1. set defaults just in .custom-dialog (as you want)
2. user can change size for lower than 400px in big screen now (this one annoy myself 😄 ).