[CI] Fix flaky test

e2e/home.spec.ts

@@ -46,10 +46,13 @@ test('clicking anywhere on a card follows its link', async ({ page }) => {
 
 test('search filters and Escape resets', async ({ page }) => {
   const search = page.getByRole('searchbox', { name: 'Search apps' });
-  // the shortcut is registered in an effect that can land after the load event
+  // the shortcut is registered in an effect that can land after the load event;
+  // only press again while unfocused, a "/" typed into the box would fail the next check
   await expect(async () => {
-    await page.keyboard.press('/');
-    await expect(search).toBeFocused({ timeout: 100 });
+    if (!(await search.evaluate((el) => el === document.activeElement))) {
+      await page.keyboard.press('/');
+    }
+    await expect(search).toBeFocused({ timeout: 500 });
   }).toPass();
   await expect(search).toHaveValue('');
 

src/index.css

@@ -291,7 +291,8 @@ body {
 
 @media (max-width: 480px) {
   .page {
-    padding-top: 20px;
+    padding-top: 16px;
+    padding-bottom: 16px;
   }
 
   .tagline {
@@ -303,7 +304,7 @@ body {
   }
 
   .footer {
-    margin-top: 20px;
+    margin-top: 16px;
   }
 
   /* two narrow columns so everything fits on a phone screen */
@@ -324,9 +325,13 @@ body {
     font-size: 0.7rem;
   }
 
+  /* one line regardless of the system font, so card height stays predictable */
   .card-description {
+    overflow: hidden;
     font-size: 0.8rem;
     line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .badges {