fix(core/time-picker): Fix scroll outside of component container on focus

packages/core/src/components/time-picker/time-picker.tsx

@@ -340,15 +340,11 @@ export class TimePicker {
         elementContainer.focus({ preventScroll: true });
 
         if (!this.isElementVisible(elementContainer, elementList)) {
-          elementContainer.scrollIntoView({
-            block: this.focusScrollAlignment,
-          });
-
-          if (this.focusScrollAlignment === 'end') {
-            elementList.scrollTop += 4;
-          } else {
-            elementList.scrollTop -= 4;
-          }
+          this.scrollElementIntoView(
+            elementContainer,
+            elementList,
+            this.focusScrollAlignment
+          );
         }
       }
     }
@@ -462,6 +458,21 @@ export class TimePicker {
     );
   }
 
+  private scrollElementIntoView(
+    element: HTMLElement,
+    container: HTMLElement,
+    alignment: 'start' | 'end'
+  ) {
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+
+    if (alignment === 'end') {
+      container.scrollTop += elementRect.bottom - containerRect.bottom + 1;
+    } else {
+      container.scrollTop += elementRect.top - containerRect.top - 1;
+    }
+  }
+
   private updateFocusedValue(value: number) {
     const numberArray = this.getNumberArrayForUnit(this.focusedUnit);
     const maxValue = numberArray[numberArray.length - 1];