прокрутка при создании протокола

src/page/ProtocolCreation/Page.tsx

@@ -199,14 +199,27 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
   }
 
   const canvasSize = useMemo(() => {
-    const PADDING_Y = 200
     const baseWidth = 1200
-    const baseHeight = 800
 
     if (template.elements.length === 0) {
-      return { width: baseWidth, height: baseHeight }
+      return { width: baseWidth, height: 150 } // Совсем маленькая высота для пустых
     }
 
+    if (template.elements.length <= 2) {
+      // Для малого количества элементов - минимальные отступы
+      const contentHeight = Math.max(
+        0,
+        ...template.elements.map(
+          el => (el.layout?.y || 0) + (el.layout?.height || 0)
+        )
+      )
+      return {
+        width: baseWidth,
+        height: Math.max(200, contentHeight + 30), // Очень маленькие отступы
+      }
+    }
+
+    // Для большого количества элементов - обычные отступы
     const contentHeight = Math.max(
       0,
       ...template.elements.map(
@@ -216,7 +229,7 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
 
     return {
       width: baseWidth,
-      height: Math.max(baseHeight, contentHeight + PADDING_Y),
+      height: Math.max(300, contentHeight + 80),
     }
   }, [template.elements])
 
@@ -301,7 +314,7 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
           className={`${showSpreadsheet ? 'hidden' : 'block'} h-full overflow-auto`}
         >
           <div
-            className="relative mx-auto my-8"
+            className="relative mx-auto my-2"
             style={{ width: canvasSize.width, height: canvasSize.height }}
           >
             {template.elements.map(element => {