From c2200da0b23af69e421a0ea936093e8eb0a55053 Mon Sep 17 00:00:00 2001
From: Federico Jaramillo Martinez <federicojaramillom@gmail.com>
Date: Sat, 23 May 2026 22:56:34 +0200
Subject: [PATCH] fix: surface refresh control on tablet PWA

---
 .changeset/mobile-refresh-control.md  | 2 +-
 src/client/src/components/PiWebApp.ts | 7 +++++--
 src/client/src/components/shared.ts   | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.changeset/mobile-refresh-control.md b/.changeset/mobile-refresh-control.md
index 5e9e863..aa5e54c 100644
--- a/.changeset/mobile-refresh-control.md
+++ b/.changeset/mobile-refresh-control.md
@@ -2,4 +2,4 @@
 "@jmfederico/pi-web": patch
 ---
 
-Add a mobile refresh control and action palette commands for refreshing app data or reloading the page.
+Add mobile and tablet PWA refresh controls plus action palette commands for refreshing app data or reloading the page.
diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts
index f4fcc75..3de8cdf 100644
--- a/src/client/src/components/PiWebApp.ts
+++ b/src/client/src/components/PiWebApp.ts
@@ -485,7 +485,10 @@ export class PiWebApp extends LitElement {
     return html`
       <header>
         <strong>PI WEB</strong>
-        <button title="Show Actions" aria-label="Show Actions" @click=${() => { this.setState({ actionPaletteOpen: true }); }}>Actions</button>
+        <div class="header-actions">
+          ${this.isMobileNavigationLayout ? null : this.renderAppRefresh()}
+          <button title="Show Actions" aria-label="Show Actions" @click=${() => { this.setState({ actionPaletteOpen: true }); }}>Actions</button>
+        </div>
       </header>
       <project-list
         .projects=${this.state.projects}
@@ -870,7 +873,7 @@ export class PiWebApp extends LitElement {
             </button>
           </li>
         </ol>
-        <div class="context-actions">${this.renderAppRefresh()}</div>
+        <div class="context-actions">${this.isMobileNavigationLayout ? this.renderAppRefresh() : null}</div>
       </nav>
     `;
   }
diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts
index 98ed6de..99def0c 100644
--- a/src/client/src/components/shared.ts
+++ b/src/client/src/components/shared.ts
@@ -54,6 +54,7 @@ export const appStyles = css`
   .shell { display: grid; grid-template-columns: 340px minmax(420px, 1fr) minmax(360px, 42vw); height: 100%; min-height: 0; }
   aside { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--pi-border); overflow: hidden; }
   header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid var(--pi-border); }
+  .header-actions { display: flex; align-items: center; gap: 8px; }
   project-list, workspace-list { flex: 0 0 auto; max-height: 26%; overflow: auto; border-bottom: 1px solid var(--pi-border-muted); }
   session-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
   main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }