From 3a2076034b8dba3dc2bfc5fd2d4bfad65d406e55 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 17 Feb 2026 19:42:43 +0000 Subject: [PATCH 1/6] Initial plan From f05a010aca4e0b1a479414f91c37428c1b809eb4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 17 Feb 2026 19:47:19 +0000 Subject: [PATCH 2/6] Add mobile responsiveness to compare.html with overflow wrappers for all tables Co-authored-by: spivanatalie64 <246875753+spivanatalie64@users.noreply.github.com> --- compare.html | 8 ++++++++ tests/basic.spec.js | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/compare.html b/compare.html index 7607e02..4bddbac 100644 --- a/compare.html +++ b/compare.html @@ -227,6 +227,7 @@

Detailed Comparisons

AcreetionOS vs Ubuntu

+
@@ -268,8 +269,10 @@

AcreetionOS vs Linux Mint

+
@@ -306,8 +309,10 @@

AcreetionOS vs Manjaro

+
@@ -344,8 +349,10 @@

AcreetionOS vs Arch Linux

+
@@ -387,6 +394,7 @@

Why Choose AcreetionOS?

diff --git a/tests/basic.spec.js b/tests/basic.spec.js index c1c415b..fffe669 100644 --- a/tests/basic.spec.js +++ b/tests/basic.spec.js @@ -121,4 +121,40 @@ test.describe('Mobile Responsiveness', () => { const nameInput = page.locator('input[name="name"]'); await expect(nameInput).toBeVisible(); }); + + test('compare page tables are scrollable on mobile', async ({ page }) => { + // Set mobile viewport (iPhone SE size) + await page.setViewportSize({ width: 375, height: 667 }); + await page.goto('/compare.html'); + + // Verify page loads + await expect(page).toHaveTitle(/Compare/); + + // Verify all comparison tables have overflow wrappers + const overflowWrappers = page.locator('div[style*="overflow-x: auto"]'); + const count = await overflowWrappers.count(); + expect(count).toBeGreaterThanOrEqual(5); // Should have at least 5 tables with overflow wrappers + + // Verify tables are visible + const tables = page.locator('.comparison-table'); + const tableCount = await tables.count(); + expect(tableCount).toBeGreaterThan(0); + + // Verify first table is visible + await expect(tables.first()).toBeVisible(); + }); + + test('compare page feature cards stack on mobile', async ({ page }) => { + // Set mobile viewport + await page.setViewportSize({ width: 375, height: 667 }); + await page.goto('/compare.html'); + + // Verify feature cards are visible + const featureCards = page.locator('.feature-card'); + const cardCount = await featureCards.count(); + expect(cardCount).toBeGreaterThan(0); + + // Verify first card is visible + await expect(featureCards.first()).toBeVisible(); + }); }); From 96228a5524693eb1128a06b218e2c928eccd4152 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 17 Feb 2026 19:48:23 +0000 Subject: [PATCH 3/6] Update test comment to accurately reflect number of overflow wrappers Co-authored-by: spivanatalie64 <246875753+spivanatalie64@users.noreply.github.com> --- tests/basic.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/basic.spec.js b/tests/basic.spec.js index fffe669..d81ce33 100644 --- a/tests/basic.spec.js +++ b/tests/basic.spec.js @@ -133,7 +133,7 @@ test.describe('Mobile Responsiveness', () => { // Verify all comparison tables have overflow wrappers const overflowWrappers = page.locator('div[style*="overflow-x: auto"]'); const count = await overflowWrappers.count(); - expect(count).toBeGreaterThanOrEqual(5); // Should have at least 5 tables with overflow wrappers + expect(count).toBeGreaterThanOrEqual(5); // Should have 5 tables with overflow wrappers (1 quick comparison + 4 detailed) // Verify tables are visible const tables = page.locator('.comparison-table'); From b7be86443d59eda5fe5f8a84cd904318b758f0bf Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 17 Feb 2026 19:59:09 +0000 Subject: [PATCH 4/6] Improve mobile scaling for headings and content on compare.html Co-authored-by: spivanatalie64 <246875753+spivanatalie64@users.noreply.github.com> --- compare.html | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/compare.html b/compare.html index 4bddbac..c4824b4 100644 --- a/compare.html +++ b/compare.html @@ -96,6 +96,26 @@ .feature-card { padding: 1rem; } + + .box-header h1 { + font-size: 1.5rem; + } + + .box-body h2 { + font-size: 1.3rem !important; + margin-top: 2rem !important; + margin-bottom: 1rem !important; + } + + .box-body h3 { + font-size: 1.1rem !important; + margin-top: 1.5rem !important; + margin-bottom: 0.75rem !important; + } + + .box-body > p:first-child { + font-size: 1rem !important; + } } @media (max-width: 480px) { @@ -115,6 +135,40 @@ .feature-card p { font-size: 0.85rem; } + + .box-header h1 { + font-size: 1.3rem; + } + + .box-body h2 { + font-size: 1.1rem !important; + margin-top: 1.5rem !important; + margin-bottom: 0.75rem !important; + } + + .box-body h3 { + font-size: 1rem !important; + margin-top: 1rem !important; + margin-bottom: 0.5rem !important; + } + + .box-body > p:first-child { + font-size: 0.95rem !important; + margin-bottom: 1.5rem !important; + } + + .box-body > div[style*="margin-top: 3rem"] { + margin-top: 2rem !important; + padding: 1rem !important; + } + + .box-body > div[style*="margin-top: 3rem"] h3 { + font-size: 1rem !important; + } + + .box-body > div[style*="margin-top: 3rem"] p { + font-size: 0.9rem !important; + } }