Screenshots for quick visual audit

web/src/css/style.css

@@ -311,6 +311,13 @@ h2 {
     line-height: 1.5;
 }
 
+@media (max-width: 500px) {
+    .recommended-pill {
+        position: static;
+        border-radius: 8px;
+    }
+}
+
 /* NickelMenu option radio cards */
 .nm-options {
     display: flex;
@@ -475,6 +482,17 @@ h2 {
     margin-left: auto;
 }
 
+@media (max-width: 500px) {
+    .step-actions:has(.step-actions-right) {
+        flex-wrap: wrap;
+    }
+
+    .step-actions-right {
+        width: 100%;
+        justify-content: flex-end;
+    }
+}
+
 /* Buttons */
 button {
     font-size: 0.9rem;
@@ -1019,14 +1037,19 @@ select + .fallback-hint {
 
 /* Selected patches summary on build step */
 .selected-patches-list {
-    margin: 0 0 0.75rem 1.25rem;
+    margin: 0 0 0.75rem;
+    padding: 0.6rem 1rem 0.6rem 2rem;
     font-size: 0.85rem;
     color: var(--text-secondary);
     line-height: 1.7;
+    background: var(--card-bg);
+    border: 1px solid var(--border-light);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
 }
 
 .selected-patches-list li {
-    padding: 0.05rem 0;
+    padding: 0.1rem 0;
 }
 
 #firmware-download-url {

web/src/index.html

@@ -188,7 +188,7 @@
             </div>
             <p id="device-status"></p>
             <p id="device-unknown-warning" class="warning" hidden>
-                You seem to have a Kobo device that isn't currently being detected. While you can continue since a supported software version seems to be installed, please
+                You seem to have a Kobo device that cannot be identified. While you can continue since a supported software version seems to be installed, please
                 <a href="https://github.com/nicoverbruggen/kobopatch-webui/issues/new" target="_blank">file an issue on GitHub</a>
                 so the developer can add this device to the list.
             </p>