Update flow fit and refine prototype screens

app/app.vue

@@ -163,6 +163,8 @@
                 <div class="flow-wrapper glass-panel rounded-3xl border border-base-300 p-4">
                   <ClientOnly>
                     <VueFlow
+                      :id="flowId"
+                      class="h-full w-full"
                       :nodes="flowNodes"
                       :edges="flowEdges"
                       :fit-view-on-init="true"
@@ -404,9 +406,11 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue'
-import { VueFlow, Handle, Position, MarkerType } from '@vue-flow/core'
+import { onMounted, onUnmounted, nextTick, ref } from 'vue'
+import { VueFlow, Handle, Position, MarkerType, useVueFlow } from '@vue-flow/core'
 import Granim from 'granim'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
 
 useHead({
   title: 'Контроль ремонта — презентация',
@@ -416,6 +420,7 @@ useHead({
 })
 
 let granimInstance
+const flowId = 'key-user-flow'
 const flowNodes = ref([
   {
     id: '1',
@@ -498,6 +503,8 @@ const flowEdges = ref([
   { id: 'e6-7', source: '6', target: '7', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'straight', markerEnd: MarkerType.ArrowClosed }
 ])
 
+const { fitView } = useVueFlow({ id: flowId })
+
 onMounted(() => {
   granimInstance = new Granim({
     element: '#canvas-basic',
@@ -514,6 +521,10 @@ onMounted(() => {
     }
   })
 
+  nextTick(() => {
+    fitView({ padding: 0.08 })
+  })
+
   onUnmounted(() => {
     if (granimInstance && granimInstance.pause) granimInstance.pause()
   })
@@ -521,8 +532,6 @@ onMounted(() => {
 </script>
 
 <style>
-@import '@vue-flow/core/dist/style.css';
-@import '@vue-flow/core/dist/theme-default.css';
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap');
 
 :root {
@@ -553,7 +562,7 @@ html {
 
 .flow-wrapper {
   width: 100%;
-  height: 100%;
+  height: 320px;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
@@ -579,20 +588,6 @@ html {
   height: 100%;
 }
 
-.vue-flow {
-  position: relative;
-}
-
-.vue-flow__nodes {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.vue-flow__edges {
-  position: absolute;
-  inset: 0;
-}
 
 .flow-card {
   min-width: 160px;
@@ -716,12 +711,7 @@ html {
 
 .flow-slide .slide-main {
   flex: 1;
-  min-height: 420px;
-}
-
-.flow-main .flow-wrapper {
-  height: 100%;
-  min-height: 420px;
+  min-height: 360px;
 }
 
 .glass-panel {