Show each residual option on its own line.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/styles/app.css

@@ -512,6 +512,51 @@ input {
   min-width: 0;
 }
 
+.kv-residuals {
+  align-items: flex-start;
+}
+
+.kv-residuals > span:first-child {
+  padding-top: 2px;
+}
+
+.residual-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  min-width: 0;
+  max-width: min(100%, 28em);
+}
+
+.residual-item {
+  text-align: right;
+  line-height: 1.35;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 900px) {
+  .kv-residuals {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .residual-list {
+    align-items: stretch;
+    max-width: none;
+  }
+
+  .residual-item {
+    text-align: left;
+    padding: 6px 8px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--line);
+  }
+}
+
 .trade-list {
   padding-top: 4px;
   padding-bottom: 4px;