chore: css touchups

mint-dewit · mint-dewit · commit 6278a13f89ee · 2025-03-19T10:46:11.000Z
diff --git a/packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.scss b/packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.scss
@@ -13,12 +13,12 @@
 	z-index: 9999;
 
 	&--large {
-		width: 480px;
+		width: 482px;
 		--preview-max-dimension: 480;
 	}
 
 	&--small {
-		width: 320px;
+		width: 322px;
 		--preview-max-dimension: 320;
 	}
 
@@ -124,6 +124,12 @@
 				transform: scaleX(-1);
 			}
 		}
+		height: calc(1px * 1080 * var(--preview-max-dimension) / 1920);
+
+		video {
+			width: calc(var(--preview-max-dimension) * 1px);
+			height: inherit;
+		}
 	}
 
 	.preview-popUp__table {

Original file line number	Diff line number	Diff line change
`@@ -13,12 +13,12 @@`
`13`	`13`	`z-index: 9999;`
`14`	`14`
`15`	`15`	`&--large {`
`16`		`- width: 480px;`
	`16`	`+ width: 482px;`
`17`	`17`	`--preview-max-dimension: 480;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`&--small {`
`21`		`- width: 320px;`
	`21`	`+ width: 322px;`
`22`	`22`	`--preview-max-dimension: 320;`
`23`	`23`	`}`
`24`	`24`
`@@ -124,6 +124,12 @@`
`124`	`124`	`transform: scaleX(-1);`
`125`	`125`	`}`
`126`	`126`	`}`
	`127`	`+ height: calc(1px * 1080 * var(--preview-max-dimension) / 1920);`
	`128`	`+`
	`129`	`+ video {`
	`130`	`+ width: calc(var(--preview-max-dimension) * 1px);`
	`131`	`+ height: inherit;`
	`132`	`+ }`
`127`	`133`	`}`
`128`	`134`
`129`	`135`	`.preview-popUp__table {`