refactor: resize screenshot for Chrome Web Store (#172)

* refactor: resize screenshot for Chrome Web Store

* Fix image name

Author: int128

.github/workflows/cypress.yaml

@@ -37,6 +37,13 @@ jobs:
       - uses: int128/comment-action@v1
         with:
           post: |
-            <img width="800" src="${{ steps.upload-artifact-wiki.outputs.url }}/cypress/screenshots/App.cy.tsx/App%20--%20mounts.png">
-
-            <img width="800" src="${{ steps.upload-artifact-wiki.outputs.url }}/cypress/screenshots/App.cy.tsx/App%20--%20opens%20the%20bookmark%20editor.png">
+            <table>
+              <tr>
+                <td><img src="${{ steps.upload-artifact-wiki.outputs.url }}/cypress/screenshots/App.cy.tsx/App%20--%20mounts.png"></td>
+                <td><img src="${{ steps.upload-artifact-wiki.outputs.url }}/cypress/screenshots/App.cy.tsx/App%20--%20enables%20dark%20mode.png"></td>
+              </tr>
+              <tr>
+                <td><img src="${{ steps.upload-artifact-wiki.outputs.url }}/cypress/screenshots/App.cy.tsx/App%20--%20opens%20the%20bookmark%20editor.png"></td>
+                <td></td>
+              </tr>
+            </table>

cypress.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'cypress'
 
-const width = 1200
-const height = width * (9 / 16)
+const width = 1280
+const height = 800
 
 export default defineConfig({
   component: {
@@ -17,7 +17,7 @@ export default defineConfig({
         // https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots/
         if (browser.name === 'chrome' && browser.isHeadless) {
           launchOptions.args.push(`--window-size=${width},${height}`)
-          launchOptions.args.push('--force-device-scale-factor=2')
+          launchOptions.args.push('--force-device-scale-factor=1')
         }
         return launchOptions
       })