.zuul-change {
    margin-bottom: 10px;
}

.zuul-change-id {
    float: right;
}

.zuul-job-result {
    float: right;
    width: 70px;
    height: 15px;
    margin: 2px 0 0 0;
}

.zuul-change-total-result {
    height: 10px;
    width: 100px;
    margin: 5px 0 0 0;
}

.zuul-spinner,
.zuul-spinner:hover {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    cursor: default;
    pointer-events: none;
}

.zuul-spinner-on,
.zuul-spinner-on:hover {
    opacity: 1;
    transition-duration: 0.2s;
    cursor: progress;
}

.zuul-change-cell {
    padding-left: 5px;
}

.zuul-change-job {
    padding: 2px 8px;
}

.zuul-job-name {
    font-size: small;
}

.zuul-non-voting-desc {
    font-size: smaller;
}

.zuul-patchset-header {
    font-size: small;
    padding: 8px 12px;
}
.zuul-change {
    margin-bottom: 10px;
}

.zuul-change-id {
    float: right;
}

.zuul-job-result {
    float: right;
    width: 70px;
    height: 15px;
    margin: 2px 0 0 0;
}

.zuul-change-total-result {
    height: 10px;
    width: 100px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

.zuul-spinner,
.zuul-spinner:hover {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    cursor: default;
    pointer-events: none;
}

.zuul-spinner-on,
.zuul-spinner-on:hover {
    opacity: 1;
    transition-duration: 0.2s;
    cursor: progress;
}

.zuul-change-cell {
    padding-left: 5px;
}

.zuul-change-job {
    padding: 2px 8px;
}

.zuul-job-name {
    font-size: small;
}

.zuul-non-voting-desc {
    font-size: smaller;
}

.zuul-patchset-header {
    font-size: small;
    padding: 8px 12px;
}
Use vertical-align for progress bar instead of margin
Status: Use vertical-align for progress bar instead of margin

This way the progress bar is always aligned with the change id
on the left. Right now this renders exactly the same, but it
seems easier to maintain.

Change-Id: I73c0bf59f9243eb4194f5235275dd68eedb4b404
