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.
2026-11-04 16:09:05 +00:00 · 2026-11-04 16:12:40 +05:30
parent 1f9c535dcc
commit 245cb357d0
5 changed files with 25 additions and 16 deletions
@@ -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>

@@ -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>
@@ -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>
@@ -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>
@@ -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. */