From 245cb357d007d3f521cdf67cefaf645aecaf446a Mon Sep 17 00:00:00 2001
From: sai nikhil kethe <nikhil@openobserve.ai>
Date: Wed, 4 Nov 2026 16:12:40 +0530
Subject: [PATCH] fix(onboarding): show whole example screens and a prominent
 skip button

- The example screen on the right shows the whole page, centred, in a
  browser frame with coloured window buttons, instead of cutting it off at
  the right and bottom.
- "Skip to app" is a filled primary button. Steps that have their own
  primary button (the coding agent page, a guide after data arrives) show
  it as an outline button.
---
 .../onboarding/OnboardingAgentSetup.vue         |  2 +-
 .../components/onboarding/OnboardingPreview.vue |  8 ++++----
 .../onboarding/OnboardingStepFooter.vue         |  9 +++++----
 .../onboarding/OnboardingStepGuide.vue          |  5 ++++-
 .../examples/OnboardingExampleScreen.vue        | 17 +++++++++++------
 5 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/web/src/components/onboarding/OnboardingAgentSetup.vue b/web/src/components/onboarding/OnboardingAgentSetup.vue
index e595dab1d8..e24262498a 100644
--- a/web/src/components/onboarding/OnboardingAgentSetup.vue
+++ b/web/src/components/onboarding/OnboardingAgentSetup.vue
@@ -217,7 +217,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           route="onboarding-agent"
           :status-root="statusEl"
         />
-        <OnboardingStepFooter />
+        <OnboardingStepFooter quiet />
       </div>
     </section>
 
diff --git a/web/src/components/onboarding/OnboardingPreview.vue b/web/src/components/onboarding/OnboardingPreview.vue
index 4af7e45d79..9829fc6b51 100644
--- a/web/src/components/onboarding/OnboardingPreview.vue
+++ b/web/src/components/onboarding/OnboardingPreview.vue
@@ -16,12 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- The brand panel beside each step: what the option under the pointer or focus gives the user,
      over an example screen of the page it fills. It fills its parent's height; the example screen
-     takes the rest of it and runs off the right and bottom edges, like a screenshot. -->
+     takes the rest of it and shows the whole page. -->
 <template>
   <div
     :class="[
-      'from-onboarding-panel-start to-onboarding-panel-end text-onboarding-panel-text flex h-full min-h-0 flex-col overflow-hidden bg-linear-to-b ps-14 pt-14 max-lg:ps-8 max-lg:pt-10',
-      !example && 'rounded-surface pb-14 max-lg:pb-10',
+      'from-onboarding-panel-start to-onboarding-panel-end text-onboarding-panel-text flex h-full min-h-0 flex-col overflow-hidden bg-linear-to-b ps-14 pt-14 pb-14 max-lg:ps-8 max-lg:pt-10 max-lg:pb-10',
+      !example && 'rounded-surface',
     ]"
     data-test="onboarding-preview"
   >
@@ -71,7 +71,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :kind="example"
       :row="exampleRow"
       :row-name="preview.title"
-      class="mt-7 min-h-56 flex-1"
+      class="me-14 mt-7 min-h-56 flex-1 max-lg:me-8"
     />
   </div>
 </template>
diff --git a/web/src/components/onboarding/OnboardingStepFooter.vue b/web/src/components/onboarding/OnboardingStepFooter.vue
index d084f0f8fd..42dfbacdcd 100644
--- a/web/src/components/onboarding/OnboardingStepFooter.vue
+++ b/web/src/components/onboarding/OnboardingStepFooter.vue
@@ -15,14 +15,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <!-- The foot of every step's left column: Skip to app, pinned in view while the column scrolls.
-     It carries the column's bottom gap, since a scroll container's padding would show rows below it. -->
+     It carries the column's bottom gap, since a scroll container's padding would show rows below it.
+     It is the step's primary button, unless the step has its own (`quiet`). -->
 <template>
   <div class="bg-surface-base sticky bottom-0 mt-auto flex justify-end pt-6 pb-5">
     <OButton
-      variant="ghost-muted"
-      size="sm"
+      :variant="quiet ? 'outline' : 'primary'"
       icon-right="arrow-forward"
-      class="-me-2"
       data-test="onboarding-view-skip"
       @click="skip"
     >
@@ -39,6 +38,8 @@ import { useI18nTyped } from "@/types/i18n";
 
 import { ONBOARDING_SKIP } from "./onboardingFlow";
 
+defineProps<{ quiet?: boolean }>();
+
 const { t } = useI18nTyped();
 const skip = inject(ONBOARDING_SKIP, () => {});
 </script>
diff --git a/web/src/components/onboarding/OnboardingStepGuide.vue b/web/src/components/onboarding/OnboardingStepGuide.vue
index 0cbe37b730..e58621b1a3 100644
--- a/web/src/components/onboarding/OnboardingStepGuide.vue
+++ b/web/src/components/onboarding/OnboardingStepGuide.vue
@@ -130,7 +130,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </div>
           </section>
-          <OnboardingStepFooter class="max-md:order-last max-md:px-4 max-md:pb-4" />
+          <OnboardingStepFooter
+            :quiet="!!result"
+            class="max-md:order-last max-md:px-4 max-md:pb-4"
+          />
         </div>
       </div>
     </aside>
diff --git a/web/src/components/onboarding/examples/OnboardingExampleScreen.vue b/web/src/components/onboarding/examples/OnboardingExampleScreen.vue
index 4ec9e56d41..1d15a75faa 100644
--- a/web/src/components/onboarding/examples/OnboardingExampleScreen.vue
+++ b/web/src/components/onboarding/examples/OnboardingExampleScreen.vue
@@ -14,24 +14,27 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<!-- A screenshot of the OpenObserve page an option fills, in a browser window that cuts it off at
-     the bottom. The picture is hidden from screen readers; they get the caption. -->
+<!-- A screenshot of the OpenObserve page an option fills, in a browser window scaled to show the
+     whole page. Every screenshot is 1440 by 900 (8:5), so the window is as wide as the space allows
+     with the 8:5 picture and the title bar fitting the height. The picture is hidden from screen
+     readers; they get the caption. -->
 <template>
   <figure
-    class="flex flex-col"
+    class="[container-type:size] flex flex-col justify-center"
     data-test="onboarding-example"
     :data-kind="kind"
     :data-row="rowShot ? row : undefined"
   >
     <div
       aria-hidden="true"
-      class="bg-surface-base rounded-ss-surface flex min-h-0 flex-1 flex-col overflow-hidden shadow-lg"
+      class="bg-surface-base rounded-surface flex w-[min(100cqw,calc((100cqh_-_1.875rem)_*_1.6))] shrink-0 flex-col overflow-hidden shadow-lg"
       data-test="onboarding-example-frame"
     >
       <div
         class="bg-surface-subtle border-border-subtle flex h-7.5 shrink-0 items-center gap-1.5 border-b px-3"
       >
-        <span v-for="dot in 3" :key="dot" class="bg-border-strong size-2.5 rounded-full" />
+        <!-- close, minimise and maximise, in the colours a browser window uses -->
+        <span v-for="dot in WINDOW_DOTS" :key="dot" class="size-2.5 rounded-full" :class="dot" />
         <span
           class="bg-surface-base text-text-secondary rounded-default text-2xs ms-2.5 px-3 py-0.5"
           >{{ HOST }}</span
@@ -40,7 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <img
         :src="src"
         alt=""
-        class="min-h-0 w-full flex-1 object-cover object-left-top"
+        class="block aspect-[8/5] w-full"
         data-test="onboarding-example-image"
       />
     </div>
@@ -63,6 +66,8 @@ import { getImageURL } from "@/utils/zincutils";
 
 import { ROW_SHOTS, type OnboardingExampleKind } from "./onboardingExamples";
 
+const WINDOW_DOTS = ["bg-status-negative", "bg-status-warning-text", "bg-status-positive"];
+
 const props = defineProps<{
   kind: OnboardingExampleKind;
   /** The step 2 row the user points at; its own screenshot wins over the choice's when it has one. */