fix: allow keyboard toolbar take all available space (#865)

## 📜 Description

Apply arrow/done paddings on elements level, not entire container, so
that conditional rendering will exclude potentially undesired paddings.

## 💡 Motivation and Context

Potentially "padding by default" approach may be not desired when you
want your custom element (content) to place that space.

So in this PR I re-worked an approach, and if done/arrows are hidden,
then `content` will fill entire container.

Closes
#848

Successor of
#851

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- removed `paddingHorizontal` from main container;
- added container for arrows and apply padding there;
- apply padding (+8px) to Done button (to compensate removed padding
from main container);

## 🤔 How Has This Been Tested?

Tested manually on iPhone 15 Pro (iOS 17.5 Fabric).

## 📸 Screenshots (if appropriate):

|No arrows|No done button|No toolbar elements|All elements|
|----------|----------------|--------------------|------------|

|![image](https://github.com/user-attachments/assets/7062f6cb-cad4-4189-a9a2-f431f7cc729f)|![image](https://github.com/user-attachments/assets/e6a0602a-2b03-4a8a-af6f-eba9c42822ba)|![image](https://github.com/user-attachments/assets/04f1d1a5-7b29-439c-a01d-f7aea92a94f5)|![image](https://github.com/user-attachments/assets/eb88dc89-20e2-418b-8268-7b3f8d8046a3)|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

src/components/KeyboardToolbar/index.tsx

@@ -156,7 +156,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (
-          <>
+          <View style={styles.arrows}>
             <ButtonContainer
               accessibilityHint="Moves focus to the previous field"
               accessibilityLabel="Previous"
@@ -185,7 +185,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
                 type="next"
               />
             </ButtonContainer>
-          </>
+          </View>
         )}
 
         <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
@@ -222,14 +222,18 @@ const styles = StyleSheet.create({
     width: "100%",
     flexDirection: "row",
     height: KEYBOARD_TOOLBAR_HEIGHT,
-    paddingHorizontal: 8,
+  },
+  arrows: {
+    flexDirection: "row",
+    paddingLeft: 8,
   },
   doneButton: {
     fontWeight: "600",
     fontSize: 15,
   },
   doneButtonContainer: {
-    marginRight: 8,
+    marginRight: 16,
+    marginLeft: 8,
   },
 });