Align client panel desktop spacing and bump Harbor versions
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 14s
Build and Deploy Gateway / deploy (push) Successful in 7s

This commit is contained in:
2026-07-12 14:58:55 +03:00
parent e8c1c9d403
commit 77eaed8d90
3 changed files with 21 additions and 6 deletions

View File

@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({ export const HARBOR_VERSIONS = Object.freeze({
macClient: '0.7.17', macClient: '0.7.18',
gatewayClient: '0.7.17', gatewayClient: '0.7.18',
gatewayBackend: '0.7.1', gatewayBackend: '0.7.1',
}); });

View File

@@ -1681,7 +1681,7 @@ p {
} }
.client-panel.has-subscription .client-form { .client-panel.has-subscription .client-form {
height: min(640px, calc(100vh - 120px)); height: var(--client-work-height);
} }
.client-power-section p { .client-power-section p {
@@ -2076,8 +2076,21 @@ p {
} }
@media (min-width: 921px) { @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 { .client-panel.has-subscription .client-form-content {
padding-top: 36px; padding-top: var(--client-power-top);
} }
} }

View File

@@ -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, /grid-column:\s*3/);
assert.match(form, /position:\s*static/); assert.match(form, /position:\s*static/);
assert.doesNotMatch(form, /\bleft\s*:|translateX|transition:[^;]*(?:left|width|transform)/); 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(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', () => { test('tablet and mobile regions use normal flow with viewport-safe widths', () => {