fix: debugging overlays should not have explicit height (facebook#41750)

Summary:
Pull Request resolved: facebook#41750

# Changelog:
[ANDROID] [FIXED] - fixed unexpected resizing of ReactRootView for dev bundles in brownfield apps

There was an android-only issue related to brownfield apps, when React Native root view is inside a modal and resizes it  - facebook#38024

Here is an explanation: facebook#38024 (comment)

Reviewed By: NickGerleman, motiz88

Differential Revision: D50644900

fbshipit-source-id: c618d30db1eade945097882ac1d21c691ff12635

packages/react-native/Libraries/Inspector/InspectorOverlay.js

@@ -15,7 +15,6 @@ import type {InspectedElement} from './Inspector';
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions').default;
 const ElementBox = require('./ElementBox');
 const React = require('react');
 
@@ -46,7 +45,7 @@ function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
       onStartShouldSetResponder={handleStartShouldSetResponder}
       onResponderMove={findViewForTouchEvent}
       nativeID="inspectorOverlay" /* TODO: T68258846. */
-      style={[styles.inspector, {height: Dimensions.get('window').height}]}>
+      style={styles.inspector}>
       {content}
     </View>
   );
@@ -59,6 +58,7 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     right: 0,
+    bottom: 0,
   },
 });
 

packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -17,7 +17,6 @@ import type {InspectedElement} from './Inspector';
 import View from '../Components/View/View';
 import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import StyleSheet from '../StyleSheet/StyleSheet';
-import Dimensions from '../Utilities/Dimensions';
 import ElementBox from './ElementBox';
 import * as React from 'react';
 
@@ -130,7 +129,8 @@ export default function ReactDevToolsOverlay({
     [onResponderMove],
   );
 
-  let highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
+  const highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
+
   if (isInspecting) {
     const events =
       // Pointer events only work on fabric
@@ -149,7 +149,7 @@ export default function ReactDevToolsOverlay({
     return (
       <View
         nativeID="devToolsInspectorOverlay"
-        style={[styles.inspector, {height: Dimensions.get('window').height}]}
+        style={styles.inspector}
         {...events}>
         {highlight}
       </View>
@@ -166,5 +166,6 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     right: 0,
+    bottom: 0,
   },
 });