diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js index 358340dd7d..976d980587 100644 --- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js +++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js @@ -1196,9 +1196,8 @@ */ _updateRelatedChangeMaxHeight() { // Takes into account approximate height for the expand button and - // bottom margin - const extraHeight = 24; - let maxExistingHeight; + // bottom margin. + const EXTRA_HEIGHT = 30; let newHeight; const hasCommitToggle = !this._computeCommitToggleHidden(this._latestCommitMessage); @@ -1216,7 +1215,7 @@ // Note: extraHeight is to take into account margin/padding. const medRelatedHeight = Math.max( this._getOffsetHeight(this.$.mainChangeInfo) - - this._getOffsetHeight(this.$.commitMessage) - 2 * extraHeight, + this._getOffsetHeight(this.$.commitMessage) - 2 * EXTRA_HEIGHT, MINIMUM_RELATED_MAX_HEIGHT); newHeight = medRelatedHeight; } else { @@ -1224,29 +1223,30 @@ // Make sure the content is lined up if both areas have buttons. If // the commit message is not collapsed, instead use the change info // height. - maxExistingHeight = this._getOffsetHeight(this.$.commitMessage); + newHeight = this._getOffsetHeight(this.$.commitMessage); } else { - maxExistingHeight = this._getOffsetHeight(this.$.mainChangeInfo) - - extraHeight; - } - // Get the line height of related changes, and convert it to the nearest - // integer. - const lineHeight = this._getLineHeight(this.$.relatedChanges); - - // Figure out a new height that is divisible by the rounded line height. - const remainder = maxExistingHeight % lineHeight; - newHeight = maxExistingHeight - remainder; - - // Update the max-height of the relation chain to this new height; - if (hasCommitToggle) { - this.customStyle['--related-change-btn-top-padding'] = - remainder + 'px'; + newHeight = this._getOffsetHeight(this.$.commitAndRelated) - + EXTRA_HEIGHT; } } if (this.$.relatedChanges.hidden) { this.customStyle['--commit-message-max-width'] = 'none'; } + // Get the line height of related changes, and convert it to the nearest + // integer. + const lineHeight = this._getLineHeight(this.$.relatedChanges); + + // Figure out a new height that is divisible by the rounded line height. + const remainder = newHeight % lineHeight; + newHeight = newHeight - remainder; + this.customStyle['--relation-chain-max-height'] = newHeight + 'px'; + + // Update the max-height of the relation chain to this new height. + if (hasCommitToggle) { + this.customStyle['--related-change-btn-top-padding'] = + remainder + 'px'; + } this.updateStyles(); }, diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html index e91f3728b8..0cc9994e01 100644 --- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html +++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html @@ -1203,13 +1203,13 @@ limitations under the License. sandbox.stub(element, '_getLineHeight', () => 12); sandbox.stub(window, 'matchMedia', () => ({matches: false})); - // 50 (existing height) - 24 (extra height) = 26 (adjusted height). - // 50 (existing height) % 12 (line height) = 2 (remainder). - // 26 (adjusted height) - 2 (remainder) = 24 (max height to set). + // 50 (existing height) - 30 (extra height) = 20 (adjusted height). + // 20 (max existing height) % 12 (line height) = 6 (remainder). + // 20 (adjusted height) - 8 (remainder) = 12 (max height to set). element._updateRelatedChangeMaxHeight(); assert.equal(element.customStyle['--relation-chain-max-height'], - '24px'); + '12px'); assert.equal(element.customStyle['--related-change-btn-top-padding'], undefined); }); @@ -1237,8 +1237,12 @@ limitations under the License. sandbox.stub(window, 'matchMedia', () => ({matches: true})); element._updateRelatedChangeMaxHeight(); + + // 400 (new height) % 12 (line height) = 4 (remainder). + // 400 (new height) - 4 (remainder) = 396. + assert.equal(element.customStyle['--relation-chain-max-height'], - '400px'); + '396px'); }); test('_updateRelatedChangeMaxHeight in medium screen mode', () => { @@ -1253,9 +1257,11 @@ limitations under the License. } }); + // 100 (new height) % 12 (line height) = 4 (remainder). + // 100 (new height) - 4 (remainder) = 96. element._updateRelatedChangeMaxHeight(); assert.equal(element.customStyle['--relation-chain-max-height'], - '100px'); + '96px'); });