From 63a70d6629bd029fdd161a82862b9f86db1bbd75 Mon Sep 17 00:00:00 2001
From: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Date: Tue, 13 Jan 2026 16:16:14 +0100
Subject: [PATCH 1/3] [DevTools] Show fallback in inspected element pane when
 no element is selected

---
 .../src/devtools/views/Components/Components.js             | 4 +++-
 .../src/devtools/views/Components/InspectedElement.css      | 6 ++++++
 .../src/devtools/views/Components/InspectedElement.js       | 4 ++++
 .../devtools/views/InspectedElement/InspectedElementPane.js | 1 +
 .../src/devtools/views/SuspenseTab/SuspenseTab.js           | 2 +-
 5 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 1f0927de98a..f9ed05a4280 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -159,7 +159,9 @@ function Components(_: {}) {
             <div className={styles.InspectedElementWrapper}>
               <NativeStyleContextController>
                 <InspectedElementErrorBoundary>
-                  <InspectedElement />
+                  <InspectedElement
+                    fallbackEmpty={'No React element selected.'}
+                  />
                 </InspectedElementErrorBoundary>
               </NativeStyleContextController>
             </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
index 7b00c0c0b39..9fa8d56db29 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
@@ -72,6 +72,12 @@
   border-left: 1px solid var(--color-border);
 }
 
+.NoInspectionFallback {
+  padding: 0.25rem;
+  font-style: italic;
+  border-left: 1px solid var(--color-border);
+}
+
 .StrictModeNonCompliant {
   display: inline-flex;
   padding: 0.25rem;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 7ba70678af0..af5c8d4b4b1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -36,6 +36,8 @@ import Tooltip from './reach-ui/tooltip';
 
 export type Props = {
   actionButtons?: React.Node,
+  /** fallback to show when no element is inspected */
+  fallbackEmpty: React.Node,
 };
 
 // TODO Make edits and deletes also use transition API!
@@ -44,6 +46,7 @@ const noSourcePromise = Promise.resolve(null);
 
 export default function InspectedElementWrapper({
   actionButtons,
+  fallbackEmpty,
 }: Props): React.Node {
   const {inspectedElementID} = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
@@ -193,6 +196,7 @@ export default function InspectedElementWrapper({
     return (
       <div className={styles.InspectedElement}>
         <div className={styles.TitleRow} />
+        <div className={styles.NoInspectionFallback}>{fallbackEmpty}</div>
       </div>
     );
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
index 0d5b523e1ad..ba689e6260d 100644
--- a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
+++ b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
@@ -25,6 +25,7 @@ function InspectedElementPane() {
       <div className={styles.InspectedElementPane}>
         <InspectedElement
           actionButtons={!hideSettings && <SettingsModalContextToggle />}
+          fallbackEmpty={'No element rendered by React selected.'}
         />
         <SettingsModal />
       </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
index 36351f82bb8..eaa87b73046 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
@@ -543,7 +543,7 @@ function SuspenseTab(_: {}) {
           className={styles.InspectedElementWrapper}
           hidden={inspectedElementHidden}>
           <InspectedElementErrorBoundary>
-            <InspectedElement />
+            <InspectedElement fallbackEmpty={'No React element selected.'} />
           </InspectedElementErrorBoundary>
         </div>
         <SettingsModal />

From a144f2d3c061ace74fea7f50f1a5c107200640a2 Mon Sep 17 00:00:00 2001
From: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Date: Tue, 13 Jan 2026 16:34:20 +0100
Subject: [PATCH 2/3] Remove redundant borders

---
 .../src/devtools/views/Components/Components.css               | 2 ++
 .../src/devtools/views/Components/InspectedElement.css         | 3 ---
 .../src/devtools/views/SuspenseTab/SuspenseTab.css             | 2 ++
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.css b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
index 8df59f72f16..b977a368af1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
@@ -22,6 +22,7 @@
   flex: 1 1 35%;
   overflow-x: hidden;
   overflow-y: auto;
+  border-left: 1px solid var(--color-border);
 }
 
 .ResizeBarWrapper {
@@ -55,6 +56,7 @@
 
   .InspectedElementWrapper {
     flex: 1 1 50%;
+    border-left: none;
   }
 
   .ResizeBar {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
index 9fa8d56db29..f9e60f0f15a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
@@ -3,7 +3,6 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
-  border-left: 1px solid var(--color-border);
   border-top: 1px solid var(--color-border);
 }
 
@@ -69,13 +68,11 @@
   padding: 0.25rem;
   color: var(--color-dimmer);
   font-style: italic;
-  border-left: 1px solid var(--color-border);
 }
 
 .NoInspectionFallback {
   padding: 0.25rem;
   font-style: italic;
-  border-left: 1px solid var(--color-border);
 }
 
 .StrictModeNonCompliant {
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
index 0b1d85b1f48..a7915d0d910 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
@@ -35,6 +35,7 @@
   flex: 0 0 calc(100% - var(--horizontal-resize-tree-percentage));
   overflow-x: hidden;
   overflow-y: auto;
+  border-left: 1px solid var(--color-border);
 }
 
 .ResizeBarWrapper {
@@ -70,6 +71,7 @@
 
   .InspectedElementWrapper {
     flex: 0 0 calc(100% - var(--vertical-resize-tree-percentage));
+    border-left: none;
   }
 
   .TreeWrapper + .ResizeBarWrapper .ResizeBar {

From f261518498d9e6c71ac39b30760ff648e8eb6985 Mon Sep 17 00:00:00 2001
From: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Date: Thu, 15 Jan 2026 13:37:53 +0100
Subject: [PATCH 3/3] Improve fallback copy

---
 .../src/devtools/views/Components/Components.js             | 4 +++-
 .../devtools/views/InspectedElement/InspectedElementPane.js | 2 +-
 .../src/devtools/views/SuspenseTab/SuspenseTab.js           | 6 +++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index f9ed05a4280..80b6d450331 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -160,7 +160,9 @@ function Components(_: {}) {
               <NativeStyleContextController>
                 <InspectedElementErrorBoundary>
                   <InspectedElement
-                    fallbackEmpty={'No React element selected.'}
+                    fallbackEmpty={
+                      'No React element selected. Select an element in the tree to inspect.'
+                    }
                   />
                 </InspectedElementErrorBoundary>
               </NativeStyleContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
index ba689e6260d..a47bffda8d7 100644
--- a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
+++ b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
@@ -25,7 +25,7 @@ function InspectedElementPane() {
       <div className={styles.InspectedElementPane}>
         <InspectedElement
           actionButtons={!hideSettings && <SettingsModalContextToggle />}
-          fallbackEmpty={'No element rendered by React selected.'}
+          fallbackEmpty={"Selected element wasn't rendered with React."}
         />
         <SettingsModal />
       </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
index eaa87b73046..bd5de7d13e4 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
@@ -543,7 +543,11 @@ function SuspenseTab(_: {}) {
           className={styles.InspectedElementWrapper}
           hidden={inspectedElementHidden}>
           <InspectedElementErrorBoundary>
-            <InspectedElement fallbackEmpty={'No React element selected.'} />
+            <InspectedElement
+              fallbackEmpty={
+                'No React element selected. Select a Suspense boundary in the minimap to inspect.'
+              }
+            />
           </InspectedElementErrorBoundary>
         </div>
         <SettingsModal />