Increase key user flow spacing

app/app.vue

@@ -165,7 +165,10 @@
                     <VueFlow
                       :nodes="flowNodes"
                       :edges="flowEdges"
-                      :fit-view-on-init="true"
+                      :fit-view-on-init="false"
+                      :default-viewport="{ x: 0, y: 0, zoom: 1 }"
+                      :min-zoom="1"
+                      :max-zoom="1"
                       :nodes-draggable="true"
                       :nodes-connectable="false"
                       :elements-selectable="true"
@@ -431,7 +434,7 @@ const flowNodes = ref([
   {
     id: '2',
     type: 'step',
-    position: { x: 240, y: 40 },
+    position: { x: 480, y: 40 },
     data: {
       step: '02',
       title: 'Смета и этапы',
@@ -441,7 +444,7 @@ const flowNodes = ref([
   {
     id: '3',
     type: 'step',
-    position: { x: 480, y: 40 },
+    position: { x: 960, y: 40 },
     data: {
       step: '03',
       title: 'Создание заявки',
@@ -451,7 +454,7 @@ const flowNodes = ref([
   {
     id: '4',
     type: 'step',
-    position: { x: 720, y: 40 },
+    position: { x: 1440, y: 40 },
     data: {
       step: '04',
       title: 'Выбор исполнителя',
@@ -461,7 +464,7 @@ const flowNodes = ref([
   {
     id: '5',
     type: 'step',
-    position: { x: 960, y: 40 },
+    position: { x: 1920, y: 40 },
     data: {
       step: '05',
       title: 'Эскроу и запуск',
@@ -471,7 +474,7 @@ const flowNodes = ref([
   {
     id: '6',
     type: 'step',
-    position: { x: 1200, y: 40 },
+    position: { x: 2400, y: 40 },
     data: {
       step: '06',
       title: 'Фиксация прогресса',
@@ -481,7 +484,7 @@ const flowNodes = ref([
   {
     id: '7',
     type: 'step',
-    position: { x: 1440, y: 40 },
+    position: { x: 2880, y: 40 },
     data: {
       step: '07',
       title: 'Приемка и расчет',
@@ -555,7 +558,23 @@ html {
 .flow-wrapper {
   width: 100%;
   height: 280px;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+.flow-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.flow-wrapper::-webkit-scrollbar-track {
+  background: rgba(20, 20, 20, 0.06);
+  border-radius: 999px;
+}
+
+.flow-wrapper::-webkit-scrollbar-thumb {
+  background: rgba(20, 20, 20, 0.2);
+  border-radius: 999px;
 }
 
 .flow-wrapper .vue-flow {