Improve scaling logic of popup list in skin editor..

Http/SkinEditor/app.css

@@ -45,15 +45,21 @@ body {
 	overflow: auto;
 }
 
-.t-list {
+.t-list-container {
 	position: absolute;
-	max-width: 100vw;
-	max-height: 100vh;
 	overflow: auto;
 	background-color: floralwhite;
 	box-sizing: border-box;
 	border: solid 1px gray;
 	border-radius: 4px;
+}
+
+.t-list-composed {
+	max-width: 100vw;
+	max-height: 100vh;
+}
+
+.t-list {
 	padding: 2px;
 	margin: 0;
 }
@@ -294,7 +300,7 @@ input {
 		background-color: black;
 		color: white;
 	}
-	.t-list {
+	.t-list-container {
 		background-color: darkslategray;
 	}
 	.t-li:hover {

Http/SkinEditor/app.js

@@ -332,18 +332,23 @@ function generateAddExpList(event, item) {
 }
 
 function popup(event, ul) {
-	clist = ul;
-	app.append(ul);
+	clist = $("<div></div>").addClass("t-list-container").append(ul);
+	app.append(clist);
+	ul.css("column-count", Math.max(1, Math.min(
+		Math.floor(0.6 * window.innerWidth / clist.outerWidth()),
+		Math.ceil((clist.outerHeight() + 256) / window.innerHeight)
+	)));
 	var left = event.pageX;
-	if (left + ul.outerWidth() > window.innerWidth)
-		left = Math.max(0, left - ul.outerWidth());
+	if (left + clist.outerWidth() > window.innerWidth)
+		left = Math.max(0, left - clist.outerWidth());
 	var top = event.pageY;
-	if (top + ul.outerHeight() > window.innerHeight)
-		top = Math.max(0, top - ul.outerHeight());
-	ul.css({
+	if (top + clist.outerHeight() > window.innerHeight)
+		top = Math.max(0, top - clist.outerHeight());
+	clist.css({
 		"left": left,
 		"top": top
 	});
+	clist.addClass("t-list-composed");
 }
 
 function generateInputList(el, key) {