Improve ADB setup UX for one/zero connected devices

Currently it's not usually possible to see the UI when only one device
is connected, but we might enable this in future, since it makes it
easier to tell what's going on (and lead users to the docs if required).

Author: pimterry

src/components/intercept/config/android-adb-config.tsx

@@ -46,6 +46,10 @@ const ConfigContainer = styled.div`
     }
 `;
 
+const Footer = styled.p`
+    font-size: 85%;
+    font-style: italic;
+`;
 
 @inject('proxyStore')
 @inject('rulesStore')
@@ -81,12 +85,35 @@ class AndroidAdbConfig extends React.Component<{
 
     render() {
         return <ConfigContainer>
-            <p>
-                There are multiple ADB devices connected.
-            </p>
-            <p>
-                Pick which device you'd like to intercept:
-            </p>
+            { this.deviceIds.length > 1
+                ? <>
+                    <p>
+                        There are multiple ADB devices connected.
+                    </p>
+                    <p>
+                        Pick which device you'd like to intercept:
+                    </p>
+                </>
+            : this.deviceIds.length === 1
+            // Should only happen if a device disappears after UI opens, due to
+            // componentDidMount auto-setup for the single-device case.
+                ? <>
+                    <p>
+                        There is one ADB device connected.
+                    </p>
+                    <p>
+                        Select the device below to begin setup:
+                    </p>
+                </>
+            // No devices connected:
+                : <>
+                    <p>
+                        There are no ADB devices connected.
+                    </p>
+                    <p>
+                        Connect an Android device to ADB to begin setup.
+                    </p>
+                </> }
 
             <InterceptionTargetList
                 spinnerText='Waiting for Android devices to intercept...'
@@ -110,6 +137,12 @@ class AndroidAdbConfig extends React.Component<{
                 interceptTarget={this.interceptDevice}
                 ellipseDirection='right'
             />
+
+            <Footer>
+                Take a look at <a
+                    href="https://httptoolkit.com/docs/guides/android/"
+                >the Android docs</a> for a detailed setup guide.
+            </Footer>
         </ConfigContainer>;
     }
 

src/components/intercept/config/intercept-target-list.tsx

@@ -9,6 +9,13 @@ import { Button } from '../../common/inputs';
 
 const SpinnerBlock = styled.div`
     text-align: center;
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 `;
 
 const Spinner = styled(Icon).attrs(() => ({
@@ -24,6 +31,8 @@ const ListScrollContainer = styled.div`
     max-height: 279px;
     overflow-y: auto;
     margin: 10px -15px;
+    flex-grow: 1;
+    flex-shrink: 1;
 `;
 
 const TargetList = styled.ul`