Align client panel desktop spacing and bump Harbor versions
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
export const HARBOR_VERSIONS = Object.freeze({
|
||||
macClient: '0.7.17',
|
||||
gatewayClient: '0.7.17',
|
||||
macClient: '0.7.18',
|
||||
gatewayClient: '0.7.18',
|
||||
gatewayBackend: '0.7.1',
|
||||
});
|
||||
|
||||
|
||||
@@ -1681,7 +1681,7 @@ p {
|
||||
}
|
||||
|
||||
.client-panel.has-subscription .client-form {
|
||||
height: min(640px, calc(100vh - 120px));
|
||||
height: var(--client-work-height);
|
||||
}
|
||||
|
||||
.client-power-section p {
|
||||
@@ -2076,8 +2076,21 @@ p {
|
||||
}
|
||||
|
||||
@media (min-width: 921px) {
|
||||
.client-panel.has-subscription {
|
||||
--client-work-height: min(640px, calc(100vh - 120px));
|
||||
--client-power-top: calc((var(--client-work-height) - 96px) / 2);
|
||||
}
|
||||
|
||||
.client-panel.has-subscription .client-power-section {
|
||||
align-self: center;
|
||||
align-content: start;
|
||||
box-sizing: border-box;
|
||||
height: var(--client-work-height);
|
||||
padding-top: var(--client-power-top);
|
||||
}
|
||||
|
||||
.client-panel.has-subscription .client-form-content {
|
||||
padding-top: 36px;
|
||||
padding-top: var(--client-power-top);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -21,9 +21,11 @@ test('desktop layout keeps the power control on a symmetric center axis', () =>
|
||||
assert.match(form, /grid-column:\s*3/);
|
||||
assert.match(form, /position:\s*static/);
|
||||
assert.doesNotMatch(form, /\bleft\s*:|translateX|transition:[^;]*(?:left|width|transform)/);
|
||||
assert.match(styles, /\.client-panel\.has-subscription \.client-form \{[\s\S]*height:\s*min\(640px, calc\(100vh - 120px\)\)/);
|
||||
assert.match(styles, /\.client-panel\.has-subscription \.client-form \{[\s\S]*height:\s*var\(--client-work-height\)/);
|
||||
assert.match(rule('.client-form-content'), /align-content:\s*start/);
|
||||
assert.match(styles, /@media \(min-width: 921px\)[\s\S]*\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*36px/);
|
||||
assert.match(styles, /--client-power-top:\s*calc\(\(var\(--client-work-height\) - 96px\) \/ 2\)/);
|
||||
assert.match(styles, /\.client-panel\.has-subscription \.client-power-section \{[\s\S]*height:\s*var\(--client-work-height\);[\s\S]*padding-top:\s*var\(--client-power-top\)/);
|
||||
assert.match(styles, /\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*var\(--client-power-top\)/);
|
||||
});
|
||||
|
||||
test('tablet and mobile regions use normal flow with viewport-safe widths', () => {
|
||||
|
||||
Reference in New Issue
Block a user