UI and UX enhancements

assets/css/index.css

@@ -338,12 +338,12 @@ body {
 	z-index: 1;
 	left: 0;
 	right: 0;
-	margin: auto auto 20px auto;
-	top: 20%;
+	margin: auto;
+	top: 16%;
 	background-color: var(--box-main);
 	border-radius: 10px;
 	width: 80%;
-	padding: 10px 10px 20px 10px;
+	padding: 10px 10px 15px 10px;
 	color: var(--text);
 }
 
@@ -399,7 +399,7 @@ body {
 	font-size: large;
 	margin: 8px;
 	outline: none;
-	max-width: 100%;
+	max-width: min(400px, 100%);
 }
 
 #videoFormatSelect, #audioFormatSelect, #audioForVideoFormatSelect {
@@ -580,6 +580,10 @@ button {
 	margin-top: 0;
 }
 
+h2{
+	margin: 12px;
+}
+
 /* Scrollbar */
 
 body::-webkit-scrollbar {

src/renderer.js

@@ -487,13 +487,14 @@ async function getInfo(url) {
 				// For videos
 
 				if (
-					format.video_ext !== "none" &&
+					(format.video_ext !== "none" &&
 					format.audio_ext === "none" &&
 					!(
 						format.video_ext === "mp4" &&
 						format.vcodec &&
 						format.vcodec.split(".")[0] === "vp09"
-					)
+					))
+					&& (!showMoreFormats ? format.video_ext !== "webm" : true)
 				) {
 					if (size !== i18n.__("Unknown size")) {
 						size = (Number(size) + 0 || Number(audioSize)).toFixed(
@@ -565,6 +566,10 @@ async function getInfo(url) {
 					format.audio_ext !== "none" ||
 					(format.acodec !== "none" && format.video_ext === "none")
 				) {
+					if (!showMoreFormats && format.audio_ext === "webm") {
+						continue;
+					}
+
 					size =
 						size !== i18n.__("Unknown size")
 							? size + " MB"
@@ -611,6 +616,7 @@ async function getInfo(url) {
 						" | " +
 						size +
 						"</option>";
+
 					getId("audioFormatSelect").innerHTML += element;
 					getId("audioForVideoFormatSelect").innerHTML += element;