From 98b96d2b1af43b5e73a1bf9ee7730a67d619f208 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 30 Dec 2024 19:19:40 -0500
Subject: [PATCH] Fix install view stepper layout shift (#2106)

---
 src/views/InstallView.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
index e68e6d3c2..8eb7c6b16 100644
--- a/src/views/InstallView.vue
+++ b/src/views/InstallView.vue
@@ -1,6 +1,13 @@
 <template>
   <BaseViewTemplate dark>
-    <Stepper class="stepper" value="0" @update:value="setHighestStep">
+    <!-- h-full to make sure the stepper does not layout shift between steps
+    as for each step the stepper height is different. Inherit the center element
+    placement from BaseViewTemplate would cause layout shift. -->
+    <Stepper
+      class="h-full p-8 2xl:p-16"
+      value="0"
+      @update:value="setHighestStep"
+    >
       <StepList class="select-none">
         <Step value="0">
           {{ $t('install.gpu') }}