TODO: docs maybe??

see https://discord.com/channels/1388415325036609617/1458088018232479824/1484195713347879012

cmd/pkgserver/ui/static/failure-closed.svg

@@ -1,6 +1,12 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
+<!-- See failure-closed.svg for an explanation for the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,50 0,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
-    <line x1="10" y1="30" x2="50" y2="70" stroke="white" stroke-width="16"/>
-    <line x1="50" y1="30" x2="10" y2="70" stroke="white" stroke-width="16"/>
+    <!--
+     ! y-coordinates go before x-coordinates to highlight the difference (or,
+     ! lack thereof) between these numbers and the ones in failure-open.svg; try
+     ! a textual diff. Make sure to keep the numbers in sync!
+     -->
+    <line y1="30" x1="10" y2="70" x2="50" stroke="white" stroke-width="16"/>
+    <line y1="30" x1="50" y2="70" x2="10" stroke="white" stroke-width="16"/>
 </svg>

cmd/pkgserver/ui/static/failure-open.svg

@@ -1,5 +1,32 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
+<!--
+ ! This view box is a bit weird: the strokes assume they're working in a view
+ ! box that spans from the (0,0) to (100,100), and indeed that is convenient
+ ! conceptualizing the strokes, but the stroke itself has a considerable width
+ ! that gets clipped by restrictive view box dimensions. Hence, the view is
+ ! shifted from (0,0)–(100,100) to (-20,-20)–(120,120), to make room for the
+ ! clipped stroke, while leaving behind an illusion of working in a view box
+ ! spanning from (0,0) to (100,100).
+ !
+ ! However, the resulting SVG is too close to the summary text, and CSS
+ ! properties to add padding do not seem to work with `content:` (likely because
+ ! they're anonymous replaced elements); thus, the width of the view is
+ ! increased considerably to provide padding in the SVG itself, while leaving
+ ! the strokes oblivious.
+ !
+ ! It gets worse: the summary text isn't vertically aligned with the icon! As
+ ! a flexbox cannot be used in a summary to align the marker with the text, the
+ ! simplest and most effective solution is to reduce the height of the view box
+ ! from 140 to 130, thereby removing some of the bottom padding present.
+ !
+ ! All six SVGs use the same view box (and indeed, they refer to this comment)
+ ! so that they all appear to be the same size and position relative to each
+ ! other on the DOM—indeed, the view box dimensions, alongside the width,
+ ! directly control their placement on the DOM.
+ !
+ ! TL;DR: CSS is janky, overflow is weird, and SVG is awesome!
+ -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,0 50,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
     <line x1="30" y1="10" x2="70" y2="50" stroke="white" stroke-width="16"/>
     <line x1="30" y1="50" x2="70" y2="10" stroke="white" stroke-width="16"/>

cmd/pkgserver/ui/static/skip-closed.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 100 100" fill="blue">
+<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0,0 100 100" fill="blue">
     <rect x="10" width="20" height="100" rx="4"/>
     <rect x="70" width="20" height="100" rx="4"/>
 </svg>

cmd/pkgserver/ui/static/skip-open.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 100 100" fill="blue">
+<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0,0 100 100" fill="blue">
     <rect y="10" width="100" height="20" rx="4"/>
     <rect y="70" width="100" height="20" rx="4"/>
 </svg>

cmd/pkgserver/ui/static/success-closed.svg

@@ -1,4 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
+<!-- See failure-closed.svg for an explanation for the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,50 0,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
 </svg>

cmd/pkgserver/ui/static/success-open.svg

@@ -1,4 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
+<!-- See failure-closed.svg for an explanation for the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,0 50,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
 </svg>