Possible to have responsive 'mv-popup' ?

[GalinhaLX]

Hi

Is there a way to make 'mv-popup' responsive? (specially the width)

On mobile devices, if property is too much in the right side of the screen, the content of mv-popup will not be fully visible

[DmitrySharabin]

Have you tried re-define some of these styles? That might help.

mavo/src-css/mavo.scss

Lines 343 to 426 in 05a038c

	.mv-popup {
	all: initial;
	position: fixed;
	z-index: 100;
	padding: 1em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: .4em;
	margin: .3em 0 0 -.5em;
	box-shadow: 0 .1em .3em rgba(0,0,0,.3);
	background: white;
	transform-origin: 1.4em -0.45em; // Magic numbers. No idea why.
	transition: .3s;
	transition-property: transform, top, right, bottom, left;
	// tip
	&::before {
	content: "";
	position: absolute;
	top: -.36em;
	left: 1em;
	padding: .3em;
	border: inherit;
	border-right-width: 0;
	border-bottom-width: 0;
	background: inherit;
	transform: rotate(45deg)
	}
	&.mv-point-down {
	transform-origin: 1.4em calc(100% - 0.45em);
	&::before {
	top: auto;
	bottom: -.36em;
	border: inherit;
	border-left-width: 0;
	border-top-width: 0;
	}
	}
	& > fieldset {
	border: none;
	padding: 0;
	}
	&[hidden] {
	display: block;
	transform: scale(0);
	}
	input, select {
	display: block;
	font: inherit;
	min-width: 100%;
	}
	select[size] {
	border: 1px solid rgba(0,0,0,.2);
	}
	.mv-upload-popup {
	border: 2px dashed rgba(0,0,0,.1);
	padding: 1em;
	margin-top: .5em;
	&.mv-dragover {
	background: #cef;
	}
	input[type=file] {
	margin-top: .8em;
	}
	.mv-tip {
	color: rgba(0,0,0,.5);
	margin-top: .8em;
	font-size: 85%;
	&::before {
	content: "💡 ";
	}
	}
	}
	}

[GalinhaLX]

The case I have, is that I can have images every where in the page

User can add images like in a porfolio gallery

In case of an image in the right side of the viewport, if i change CSS styles to adapt to that case, then I have an issue for the images that are in the left side of viewport
(same for images on top or bottom)

I saw that popper.js solves that problem, switching position correctly and automaticly, but i can't understand how it does it ..seems not only with CSS

that's why I proposed this plugin idea
could propably solve many use cases