fix: try to fit message as far as possible (#3466)

## 🎯 Goal

This PR fixes an edge case where the teleported message would not
properly try to fit as much as it can within the screen if the total sum
of the top item height, its own height and the bottom item height would
be greater than the screen height.

With this, we'll always try to animate the message as far as we can and
clamp the animation to its boundaries. The bottom item will still
overlap any excess height as it was before.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -125,9 +125,10 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     const msgH = messageH.value.h;
     const minTop = minY + topH.value.h;
     const maxTopWithBottom = maxY - (msgH + bottomH.value.h);
-    const maxTopWithoutBottom = maxY - msgH;
-    const maxTop = minTop <= maxTopWithBottom ? maxTopWithBottom : maxTopWithoutBottom;
-    const solvedTop = clamp(anchorY, minTop, Math.max(minTop, maxTop));
+    const canFitBottomWithoutOverlap = minTop <= maxTopWithBottom;
+    const solvedTop = canFitBottomWithoutOverlap
+      ? clamp(anchorY, minTop, Math.max(minTop, maxTopWithBottom))
+      : minTop;
 
     return solvedTop - anchorY;
   });
@@ -139,16 +140,10 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     const msgH = messageH.value.h;
     const minMessageTop = minY + topH.value.h;
     const maxMessageTopWithBottom = maxY - (msgH + bottomH.value.h);
-    const maxMessageTopWithoutBottom = maxY - msgH;
-    const maxMessageTop =
-      minMessageTop <= maxMessageTopWithBottom
-        ? maxMessageTopWithBottom
-        : maxMessageTopWithoutBottom;
-    const solvedMessageTop = clamp(
-      anchorMessageTop,
-      minMessageTop,
-      Math.max(minMessageTop, maxMessageTop),
-    );
+    const canFitBottomWithoutOverlap = minMessageTop <= maxMessageTopWithBottom;
+    const solvedMessageTop = canFitBottomWithoutOverlap
+      ? clamp(anchorMessageTop, minMessageTop, Math.max(minMessageTop, maxMessageTopWithBottom))
+      : minMessageTop;
 
     const solvedBottomTop = Math.min(solvedMessageTop + msgH, maxY - bottomH.value.h);
     return solvedBottomTop - bottomH.value.y;