fix(ui): fix bug report steps radius

frontend/app/components/Session_/BugReport/components/Steps.tsx

@@ -46,6 +46,12 @@ function Steps({ xrayProps, notes, members }: Props) {
     bugReportStore.resetSteps();
   };
 
+  React.useEffect(() => {
+    if (bugReportStore.sessionEventSteps.length < RADIUS && bugReportStore.sessionEventSteps.length > 0) {
+      setRadius(bugReportStore.sessionEventSteps.length);
+    }
+  }, [bugReportStore.sessionEventSteps])
+
   return (
     <div>
       <SectionTitle>Steps to reproduce</SectionTitle>
@@ -63,7 +69,7 @@ function Steps({ xrayProps, notes, members }: Props) {
           STEPS
           <div id="pdf-ignore">
             {timePointer > 0 ? (
-              <StepRadius pickRadius={stepPickRadius} setRadius={setRadius} />
+              <StepRadius pickRadius={stepPickRadius} setRadius={setRadius} stepsNum={bugReportStore.sessionEventSteps.length}/>
             ) : null}
           </div>
         </div>

frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx

@@ -4,9 +4,10 @@ import { Tooltip } from 'UI'
 interface Props {
   pickRadius: number;
   setRadius: (v: number) => void;
+  stepsNum: number;
 }
 
-function StepRadius({ pickRadius, setRadius }: Props) {
+function StepRadius({ pickRadius, setRadius, stepsNum }: Props) {
   return (
     <div className="w-full flex items-center gap-4">
       <div className="border-b border-dotted border-gray-medium cursor-help">
@@ -18,7 +19,7 @@ function StepRadius({ pickRadius, setRadius }: Props) {
       <div className="flex items-center gap-1">
         <div
           className="rounded px-2 bg-light-blue-bg cursor-pointer hover:bg-teal-light"
-          onClick={() => setRadius(pickRadius + 1)}
+          onClick={() => pickRadius < Math.floor(stepsNum/2) ? setRadius(pickRadius + 1) : null}
         >
           +1
         </div>

frontend/app/components/Session_/BugReport/utils.ts

@@ -62,7 +62,7 @@ export function getClosestEventStep(time: number, arr: Step[]) {
 export const selectEventSteps = (steps: Step[], targetTime: number, radius: number) => {
   const { targetStep, index } = getClosestEventStep(targetTime, steps)
 
-  const stepsBeforeEvent = steps.slice(index - radius, index)
+  const stepsBeforeEvent = steps.slice(Math.max(index - radius, 0), index)
   const stepsAfterEvent = steps.slice(index + 1, index + 1 + radius)
 
   return [...stepsBeforeEvent, targetStep, ...stepsAfterEvent]