improve small elements rendering, bump to 0.4.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "PLWL",
   "productName": "PLWL",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Portable Linux Wine Launcher",
   "main": "src/main.js",
   "scripts": {

renderer/app.js

@@ -1,5 +1,17 @@
 'use strict'
 
+// The CSS scales the root font size with the window width (max(15px, 100vw/90)),
+// which is fractional at almost every width - every rem value in the UI then
+// lands on a fractional pixel and text/border rounding drifts a pixel up or
+// down while resizing (badges were the most visible case). Snap it to whole
+// pixels so the whole layout steps in 1px root increments instead.
+function snapRootFontSize() {
+  const px = Math.max(15, Math.round(window.innerWidth / 90))
+  document.documentElement.style.fontSize = px + 'px'
+}
+snapRootFontSize()
+window.addEventListener('resize', snapRootFontSize, { passive: true })
+
 const qs = s => document.querySelector(s)
 const qsa = s => [...document.querySelectorAll(s)]
 

renderer/style.css

@@ -7,6 +7,10 @@
   src: url('Nunito-Black.ttf') format('truetype');
 }
 
+* {
+  transform: translateZ(0);
+}
+
 :root {
   --main-bg-color: rgb(20, 20, 20);
   --panel-color: rgb(26, 26, 26);
@@ -16,7 +20,7 @@
   --button-margin: 0.4rem;
   --button-height: 2.4rem;
   --icon-button-size: 3.4rem;
-  --border-width: 0.09rem;
+  --border-width: 0.08rem;
   --big-default: rgb(207, 207, 207);
   --big-red: hsl(0, 68%, 52%);
   --big-green: hsl(120, 60%, 55%);
@@ -103,10 +107,6 @@ sidebarelement.active .icon-button { background: rgba(255, 255, 255, 0.05); }
   border: var(--border-width) solid transparent;
   border-radius: 0.8rem;
   cursor: pointer;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  will-change: transform;
-  transform-origin: center center;
 }
 .icon-button:hover { background: rgba(255, 255, 255, 0.05); }
 .icon-button:active { background: rgba(255, 255, 255, 0.1); transform: var(--press-scale); }
@@ -211,10 +211,6 @@ content {
   /* only Regular and Black faces are bundled, so >=600 resolves to the same
      bold rendering on every button; primary just adds the filled style */
   font-weight: 700;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  will-change: transform;
-  transform-origin: center center;
 }
 .button:hover { background-color: rgba(255, 255, 255, 0.09); }
 .button:active { background-color: rgba(255, 255, 255, 0.1); transform: var(--press-scale); }
@@ -260,10 +256,6 @@ input, textarea {
   min-height: var(--button-height);
   user-select: text !important;
   cursor: text;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  will-change: transform;
-  transform-origin: center center;
 }
 input:hover, textarea:hover { background-color: rgba(255, 255, 255, 0.09); }
 input:active, textarea:active { background-color: rgba(255, 255, 255, 0.1); }
@@ -298,8 +290,6 @@ input[type='checkbox'] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  backface-visibility: hidden;
-  transform: translateZ(0);
   transition: all 0.15s ease;
 }
 input[type='checkbox']:hover { background-color: rgba(255, 255, 255, 0.09); }
@@ -336,10 +326,6 @@ select {
   width: 100%;
   user-select: none;
   z-index: 2;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  will-change: transform;
-  transform-origin: center center;
 }
 .custom-select:hover { background-color: rgba(255, 255, 255, 0.09); }
 .custom-select:active { background-color: rgba(255, 255, 255, 0.1); transform: var(--press-scale); }
@@ -558,11 +544,11 @@ select {
   flex-wrap: wrap;
 }
 .badge {
+  display: inline-flex;
+  align-items: center;
   font-size: 0.72rem;
-  /* Nunito keeps a lot of air above the caps, so a line box centred by its
-     font metrics reads as "text sits high" (clearest on "Portable"); bias the
-     padding downwards, keeping the same overall height, to centre the label */
-  padding: 0.25em 0.7em 0.03em;
+  line-height: 1.2;
+  padding: 0.24em 0.7em 0.24em;
   border-radius: 0.6rem;
   border: var(--border-width) solid var(--light-border-color);
   color: var(--darker-text-color);