fix(desktop): match canonical chip chrome

Author: waleedlatif1

apps/desktop/e2e/smoke.spec.ts

@@ -119,5 +119,9 @@ test.describe('desktop shell smoke', () => {
       .toBe(true)
     await expect(window.locator('#retry')).toHaveCSS('height', '30px')
     await expect(window.locator('#retry')).toHaveCSS('border-radius', '8px')
+    await expect(window.locator('#retry')).toHaveCSS('padding-left', '8px')
+    await expect(window.locator('#retry')).toHaveCSS('font-size', '14px')
+    await expect(window.locator('#retry')).toHaveCSS('line-height', '20px')
+    await expect(window.locator('#retry')).toHaveCSS('text-align', 'left')
   })
 })

apps/desktop/static/offline.html

@@ -43,7 +43,6 @@
         color: var(--text-primary);
         font-family: 'Season Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         -webkit-font-smoothing: antialiased;
-        letter-spacing: 0.02em;
         user-select: none;
       }
       header {
@@ -105,7 +104,7 @@
         display: inline-flex;
         height: 30px;
         align-items: center;
-        justify-content: center;
+        gap: 6px;
         appearance: none;
         border: 0;
         background: transparent;
@@ -115,13 +114,26 @@
         font: inherit;
         font-size: 14px;
         line-height: 20px;
+        text-align: left;
         cursor: pointer;
         outline: none;
         transition:
           color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-          background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+          background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
         -webkit-app-region: no-drag;
       }
+      button .label {
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+        color: currentColor;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       button.primary {
         background: var(--text-primary);
         color: var(--text-inverse);
@@ -177,8 +189,8 @@ <h1 id="title">Can’t connect to Sim</h1>
           Sim couldn’t reach the server. Check your internet connection, then try again.
         </p>
         <div class="actions">
-          <button class="primary" id="retry">Retry</button>
-          <button class="secondary" id="status">Check status</button>
+          <button class="primary" id="retry"><span class="label">Retry</span></button>
+          <button class="secondary" id="status"><span class="label">Check status</span></button>
         </div>
         <div id="detail" role="status"></div>
       </div>