/* Keep the cargo label, value, and action in one predictable reading flow. */
.tracking-app .cargo-field.cargo-name {
  display: grid;
  grid-template-areas:
    "label action"
    "value action";
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 3px;
  align-items: center;
}

.tracking-app .cargo-field.cargo-name > span {
  grid-area: label;
  margin: 0;
}

.tracking-app .cargo-field.cargo-name > b {
  grid-area: value;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-app .cargo-field.cargo-name > .view-cargo {
  grid-area: action;
  align-self: center;
  white-space: nowrap;
}