fix space in url

css/jstris-skin.css

@@ -23,8 +23,6 @@ tr.matrix td:not(.mino) {
 }
 
 .mino {
-    width: var(--cell-size);
-    height: var(--cell-size);
     background-image: var(--skin-url);
     background-size: cover;
     background-repeat: no-repeat;
@@ -87,10 +85,10 @@ tr.matrix td:not(.mino) {
 }
 
 .select2-container:not(.select2-container--disabled) .selection {
-    width: calc(var(--nb-sprites) * var(--cell-size));
-    background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
     --nb-sprites: 4;
     --sprite-pos: 4;
+    width: calc(var(--nb-sprites) * var(--cell-size));
+    background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
     background-image: var(--skin-url);
     background-size: cover;
     background-repeat: no-repeat;

css/tetrio-skin.css

@@ -9,8 +9,6 @@
 }
 
 .mino {
-    width: var(--cell-size);
-    height: var(--cell-size);
     background-image: var(--skin-url);
     background-size: cover;
     background-repeat: no-repeat;
@@ -73,11 +71,12 @@
 }
 
 .select2-container:not(.select2-container--disabled) .selection {
+    --cell-size: 24px;
     --padded-cell-size: calc(var(--cell-size) + 1px);
-    width: calc(var(--nb-sprites) * var(--padded-cell-size));
+    --nb-sprites: 4;
+    --sprite-pos: 2;
+    width: calc(var(--nb-sprites) * var(--padded-cell-size) - 1px);
     background-position-x: calc(-1 * var(--sprite-pos) * var(--padded-cell-size));
-    --nb-sprites: 3;
-    --sprite-pos: 4;
     background-image: var(--skin-url);
     background-size: cover;
     background-repeat: no-repeat;

index.html

@@ -93,7 +93,7 @@
                 </div>
                 <div class="col-4">
                   <select name="skinURL" id="skinURLSelect" class="form-select"
-                  oninput="document.documentElement.style.setProperty('--skin-url', `url(${this.value})`)">
+                  oninput="document.documentElement.style.setProperty('--skin-url', `url('${this.value}')`)">
                   </select>
                 </div>
                 <label for="skinURLSelect" class="col-2 col-form-label">Sample</label>

js/app.js

@@ -336,7 +336,7 @@ stylesheetSelect.oninput = function (event) {
                             text: group,
                             children: json[group].map(skin => ({
                                 id: skin.link,
-                                text: `${skin.name} (${skin.author})`,
+                                text: `${skin.name} (${skin.author})\n${skin.description}`,
                             })),
                         };
                         data.push(groupData);