Fix sidebar button on iPhones

assets/sass/sidebar.scss

@@ -47,7 +47,7 @@ aside.sidebar.active {
     background-color: $black-3 !important;
     display: block;
     position: fixed;
-    padding: 2rem 0.4rem;
+    padding: 2rem 0rem;
     z-index: 1;
     border: none;
     left: 0;

layouts/partials/sidebar.html

@@ -1,5 +1,5 @@
 {{ $section := .Scratch.Get "section" }}
-<button class="sidebar-btn"></button>
+<div tabindex="1" class="sidebar-btn"></div>
 <aside class="sidebar" id="sidebar">
   <nav>
     <ul>

package.json

@@ -4,7 +4,7 @@
   "description": "This is the Git home page.",
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.47.0",
+    "@playwright/test": "^1.47.2",
     "@types/node": "^22.5.4"
   }
 }

playwright.config.js

@@ -57,6 +57,13 @@ module.exports = defineConfig({
       name: 'chrome',
       use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     },
+    {
+      name: 'iPhone',
+      use: {
+        ...devices['iPhone 11'],
+      },
+    },
+
 
     /* Test against mobile viewports. */
     // {

tests/git-scm.spec.js

@@ -265,3 +265,19 @@ test('404', async ({ page }) => {
   // the usual navbar is shown
   await expect(page.getByRole('link', { name: 'Community' })).toBeVisible()
 })
+
+test('sidebar', async ({ page }) => {
+  await page.goto(`${url}community`);
+
+  test.skip(!await page.evaluate(() => matchMedia('(max-width: 940px)').matches),
+    'not a small screen');
+
+  const sidebarButton = page.locator('.sidebar-btn');
+  await expect(sidebarButton).toBeVisible();
+  await sidebarButton.click();
+
+  const about = page.getByRole('link', { name: 'About', exact: true });
+  await expect(about).toBeVisible();
+  await about.click();
+  await expect(page.getByRole('heading', { name: 'About - Branching and Merging' })).toBeVisible();
+});