Fixed city unit training display

client/css/style.css

@@ -639,6 +639,12 @@ input:focus, select:focus { border-color: var(--accent); }
   align-self: center;
   opacity: 0.9;
 }
+.unit-icon {
+  width: 26px;
+  height: 26px;
+  flex: 0 0 auto;
+  opacity: 0.9;
+}
 .row-card .name { font-weight: 600; }
 .row-card .desc { color: var(--muted); font-size: 12px; margin: 3px 0; }
 .row-card .effects { font-size: 12px; color: #bcd4ff; }
@@ -741,8 +747,9 @@ input:focus, select:focus { border-color: var(--accent); }
 .training-queue .queue-row .actions .aero { min-width: 110px; }
 
 /* The city modal keeps a fixed, slightly larger size. The unit buttons sit in
-   a fixed, non-scrolling box; the queue is the flexible part and scrolls, so
-   adding units never stretches the card or pushes the buttons out of reach. */
+   a fixed-height box that scrolls when there are more units than fit; the queue
+   below is the flexible part and scrolls too, so adding units never stretches
+   the card or pushes the buttons out of reach. */
 #modal-city .modal-card {
   width: 680px;
   height: min(80vh, 740px);
@@ -750,13 +757,19 @@ input:focus, select:focus { border-color: var(--accent); }
 #modal-city #city-train-list {
   flex: 0 0 auto;
   width: 100%;
-  height: 120px;
-  max-height: none;
-  overflow: hidden;
+  max-height: 168px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
+#modal-city #city-train-list .train-button {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+}
 #modal-city .training-status { flex: 0 0 auto; }
 #modal-city .training-queue { flex: 1 1 auto; min-height: 0; }
 .progress { height: 14px; margin-top: 8px; background: rgba(0, 0, 0, 0.5); border-radius: 7px; overflow: hidden; }

client/js/modals/city.js

@@ -87,9 +87,16 @@ export class CityModal {
     for (let index = 0; index < trainableUnits.length; index++) {
       const proto = trainableUnits[index];
       if (!proto.cost && proto.cost !== 0) continue;
-      const button = $("<button class='aero'></button>");
+      const button = $("<button class='aero train-button'></button>");
+      if (proto.icon) {
+        button.append(
+          $("<img class='unit-icon' />").attr({ src: `assets/${proto.icon}`, alt: proto.name })
+        );
+      }
       const duration = ECONOMY.trainingHours(gdp, proto.cost);
-      button.text(`${proto.name}  —  Cost ${groupDigits(proto.cost)}  —  ${hours(duration)}`);
+      button.append(
+        $("<span></span>").text(`${proto.name}  —  Cost ${groupDigits(proto.cost)}  —  ${hours(duration)}`)
+      );
       const serverIndex = proto.serverIndex !== undefined ? proto.serverIndex : index;
       this.protoNames.set(serverIndex, proto.name);
       button.on("click", () => this.onTrain(this.cityId, serverIndex));