fix(ui): separate wrapped landing call-to-action lines

This commit is contained in:
cesnimda
2026-10-23 04:27:26 +02:00
parent b9e052cd22
commit 0fb108bd67
6 changed files with 935 additions and 25 deletions
@@ -17,12 +17,13 @@ for (const language of ['en', 'nb'] as const) {
await page.reload();
await expect(page.getByRole('heading', { name: translations[language].landingPreviewTitle, exact: true })).toBeVisible();
await page.evaluate(() => document.fonts.ready);
const headings = await page.locator('h2').evaluateAll(nodes => nodes.map(node => {
const headings = await page.locator('h2').or(page.getByText(translations[language].landingReadyTitle, { exact: true })).evaluateAll(nodes => nodes.map(node => {
const range = document.createRange(); range.selectNodeContents(node);
const lines = [...range.getClientRects()].filter(rect => rect.width > 0).map(rect => ({ top: rect.top, bottom: rect.bottom }));
return { text: node.textContent, lineHeight: getComputedStyle(node).lineHeight, lines };
}));
expect(headings.length).toBeGreaterThanOrEqual(4);
expect(headings.length).toBeGreaterThanOrEqual(5);
expect(headings.some(heading => heading.text === translations[language].landingReadyTitle)).toBe(true);
if (width === 320) expect(headings.some(heading => heading.lines.length > 1)).toBe(true);
for (const heading of headings) for (let index = 1; index < heading.lines.length; index++) {
expect.soft(heading.lines[index].top, `${width}/${theme}: ${heading.text}`).toBeGreaterThanOrEqual(heading.lines[index - 1].bottom - 1);
+1 -1
View File
@@ -258,7 +258,7 @@ export default function LandingPage() {
<Container maxWidth="lg" sx={{ py: { xs: 7, md: 10 } }}>
<Box sx={{ borderRadius: 4, p: { xs: 4, md: 6 }, background: "linear-gradient(120deg,#0f172a,#1e293b)", color: "#fff", display: "flex", flexDirection: { xs: "column", md: "row" }, alignItems: { md: "center" }, justifyContent: "space-between", gap: 3 }}>
<Box>
<Typography sx={{ fontWeight: 800, fontSize: { xs: 24, md: 30 }, mb: 1 }}>{t("landingReadyTitle")}</Typography>
<Typography sx={{ fontWeight: 800, fontSize: { xs: 24, md: 30 }, lineHeight: 1.4, mb: 1 }}>{t("landingReadyTitle")}</Typography>
<Typography sx={{ color: "#94a3b8", fontSize: 17 }}>{t("landingReadyBody")}</Typography>
</Box>
<GradientButton size="large" onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 800, px: 4, py: 1.25, whiteSpace: "nowrap" }}>