[Logs UI] Fix column reordering in settings page (#58104)

* Ensure only one element has scroll

Apparently having multiple elements with scroll confuses the
`react-beautiful-dnd` mechanism to determine the position of the
elements. Adding `overflowY` to the app root fixes it.

* Fix upper bound check for log column reordering

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -79,6 +79,7 @@ export async function startApp(
   // expected.
   element.style.height = '100%';
   element.style.display = 'flex';
+  element.style.overflowY = 'hidden'; // Prevent having scroll within a container having scroll. It messes up with drag-n-drop elements
   element.className += ` ${CONTAINER_CLASSNAME}`;
 
   ReactDOM.render(<App />, element);

x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_form_state.tsx

@@ -108,7 +108,7 @@ export const useLogColumnsConfigurationFormState = ({
 
   const moveLogColumn = useCallback(
     (sourceIndex, destinationIndex) => {
-      if (destinationIndex >= 0 && sourceIndex < formState.logColumns.length - 1) {
+      if (destinationIndex >= 0 && sourceIndex <= formState.logColumns.length - 1) {
         const newLogColumns = [...formState.logColumns];
         newLogColumns.splice(destinationIndex, 0, newLogColumns.splice(sourceIndex, 1)[0]);
         setFormStateChanges(changes => ({