Markdown input doesn't fully scroll itself into view on focus

[Skalakid]

Objective

Fix scrolling into view markdown input on web, so it will show the whole component (including padding inside it) in every situation.

Current state

When focusing markdown text input on web that is near the bootom of scrollable area, page scrolls to markdown input however only to the bottom of the line where the caret is.

Video

bug.mov

Example app

App.tsx

import * as React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
import Composer from './Composer';

function createComposerData() {
  return Array.from({length: 10}, (_, i) => `Composer ${i + 1}`);
}

export default function App() {
  const [data, setData] = React.useState(createComposerData());
  return (
    <View style={styles.container}>
      <Text>Flatlist with composers</Text>
      <FlatList
        data={data}
        renderItem={({item}) => <Composer placeholder={item} />}
        style={styles.flatlist}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginTop: 60,
  },
  flatlist: {width: 300, height: 200, borderWidth: 1, borderColor: 'black'},
});

Composer.tsx

import * as React from 'react';
import type {TextInput} from 'react-native';
import {Button, View, StyleSheet} from 'react-native';
import {MarkdownTextInput} from '@expensify/react-native-live-markdown';

type ComposerProps = {
  placeholder: string;
};

export default function Composer({placeholder}: ComposerProps) {
  const ref = React.useRef<TextInput>(null);
  return (
    <View style={styles.container}>
      <MarkdownTextInput
        multiline
        autoCapitalize="none"
        style={styles.input}
        ref={ref}
        placeholder={placeholder}
      />
      <Button
        title="Focus"
        onPress={() => {
          if (!ref.current) {
            return;
          }
          ref.current.focus();
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    fontSize: 20,
    width: 300,
    padding: 20,
    borderColor: 'gray',
    borderWidth: 1,
    textAlignVertical: 'top',
  },
  container: {
    flexDirection: 'row',
  },
});