Screenly · nicomiguelino · Aug 3, 2026 · Jul 28, 2026 · Aug 3, 2026 · Aug 3, 2026
diff --git a/bun.lock b/bun.lock
diff --git a/index.html b/index.html
@@ -6,35 +6,40 @@
     <title>Salesforce Analytics - Screenly Edge App</title>
     <script src="screenly.js?version=1"></script>
   </head>
-  <body>
+  <body class="bg-[#111] text-[#f2f2f3]">
     <auto-scaler
       reference-width="1920"
       reference-height="1080"
       orientation="auto"
+      class="relative z-[var(--z-index-content)]"
     >
-      <div id="app">
+      <div id="app" class="flex flex-col w-full h-full p-5 gap-5">
         <app-header class="header" show-date></app-header>
 
-        <main>
+        <main class="flex-1 flex flex-col min-h-0 overflow-hidden">
           <!-- Content screen: shown after auth -->
-          <div id="dashboard-screen" style="display: none">
-            <h2 id="dashboard-title"></h2>
-            <div id="charts-grid"></div>
+          <div
+            id="dashboard-screen"
+            class="dashboard-screen"
+            style="display: none"
+          >
+            <h2 id="dashboard-title" class="dashboard-title"></h2>
+            <div id="charts-grid" class="charts-grid"></div>
           </div>
 
           <!-- Error screen -->
-          <div id="error-screen" style="display: none">
+          <div id="error-screen" class="error-screen" style="display: none">
             <div class="error-card">
-              <div class="error-card-left">
-                <h2>Something went wrong</h2>
+              <div class="error-aside">
+                <h2 class="error-title">Something went wrong</h2>
                 <p>
                   The Salesforce content could not be loaded. Please check your
                   configuration or contact your administrator.
                 </p>
               </div>
-              <div class="error-card-right">
-                <div class="error-detail-label">Error details</div>
-                <p id="error-message" class="error-detail-message"></p>
+              <div class="error-body">
+                <div class="error-label">Error details</div>
+                <p id="error-message" class="error-message"></p>
               </div>
             </div>
           </div>

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   "prettier": "./.prettierrc.json",
   "devDependencies": {
     "@playwright/test": "^1.58.0",
-    "@screenly/edge-apps": "^1.1.2",
+    "@screenly/edge-apps": "^1.4.0",
     "@types/bun": "^1.3.9",
     "bun-types": "^1.3.9",
     "chart.js": "^4.4.0",

diff --git a/screenshots/dashboard-1080x1920.webp b/screenshots/dashboard-1080x1920.webp
diff --git a/screenshots/dashboard-1280x720.webp b/screenshots/dashboard-1280x720.webp
diff --git a/screenshots/dashboard-1920x1080.webp b/screenshots/dashboard-1920x1080.webp
diff --git a/screenshots/dashboard-2160x3840.webp b/screenshots/dashboard-2160x3840.webp
diff --git a/screenshots/dashboard-2160x4096.webp b/screenshots/dashboard-2160x4096.webp
diff --git a/screenshots/dashboard-3840x2160.webp b/screenshots/dashboard-3840x2160.webp
diff --git a/screenshots/dashboard-4096x2160.webp b/screenshots/dashboard-4096x2160.webp
diff --git a/screenshots/dashboard-480x800.webp b/screenshots/dashboard-480x800.webp
diff --git a/screenshots/dashboard-720x1280.webp b/screenshots/dashboard-720x1280.webp
diff --git a/screenshots/dashboard-800x480.webp b/screenshots/dashboard-800x480.webp
diff --git a/screenshots/dashboard-labels-1080x1920.webp b/screenshots/dashboard-labels-1080x1920.webp
diff --git a/screenshots/dashboard-labels-1920x1080.webp b/screenshots/dashboard-labels-1920x1080.webp
diff --git a/screenshots/error-2160x3840.webp b/screenshots/error-2160x3840.webp
diff --git a/screenshots/error-3840x2160.webp b/screenshots/error-3840x2160.webp
diff --git a/screenshots/error-not-found-3840x2160.webp b/screenshots/error-not-found-3840x2160.webp
diff --git a/screenshots/report-2160x3840.webp b/screenshots/report-2160x3840.webp
diff --git a/screenshots/report-3840x2160.webp b/screenshots/report-3840x2160.webp
diff --git a/screenshots/report-labels-1080x1920.webp b/screenshots/report-labels-1080x1920.webp
diff --git a/screenshots/report-labels-1920x1080.webp b/screenshots/report-labels-1920x1080.webp