Expand intercept blocks slightly and tighten target list sizing

We now use custom sizes, in each case set to the exact level required to
avoid resizing the row (taking into account our new row sizes).

Author: pimterry

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

@@ -46,6 +46,10 @@ const ConfigContainer = styled.div`
     }
 `;
 
+const AdbTargetList = styled(InterceptionTargetList)`
+    max-height: 280px;
+`;
+
 const Footer = styled.p`
     font-size: 85%;
     font-style: italic;
@@ -88,10 +92,8 @@ class AndroidAdbConfig extends React.Component<{
             { this.deviceIds.length > 1
                 ? <>
                     <p>
-                        There are multiple ADB devices connected.
-                    </p>
-                    <p>
-                        Pick which device you'd like to intercept:
+                        There are multiple ADB devices connected. Pick which
+                        device you'd like to intercept:
                     </p>
                 </>
             : this.deviceIds.length === 1
@@ -115,7 +117,7 @@ class AndroidAdbConfig extends React.Component<{
                     </p>
                 </> }
 
-            <InterceptionTargetList
+            <AdbTargetList
                 spinnerText='Waiting for Android devices to intercept...'
                 targets={this.deviceIds.map(id => {
                     const activating = this.inProgressIds.includes(id);

src/components/intercept/config/docker-attach-config.tsx

@@ -42,6 +42,10 @@ const ConfigContainer = styled.div`
     }
 `;
 
+const DockerTargetList = styled(InterceptionTargetList)`
+    max-height: 262px;
+`;
+
 const Footer = styled.p`
     font-size: 85%;
     font-style: italic;
@@ -101,7 +105,7 @@ class DockerAttachConfig extends React.Component<{
                 Pick a container to restart it with all traffic intercepted:
             </p>
 
-            <InterceptionTargetList
+            <DockerTargetList
                 spinnerText='Looking for Docker containers to intercept...'
                 interceptTarget={this.interceptTarget}
                 ellipseDirection='left'

src/components/intercept/config/frida-config.tsx

@@ -24,7 +24,7 @@ const ConfigContainer = styled.div`
     user-select: text;
 
     height: 100%;
-    max-height: 390px;
+    max-height: 410px;
     display: flex;
     flex-direction: column;
     justify-content: start;

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

@@ -34,8 +34,6 @@ const ListScrollContainer = styled.div`
     margin: 10px -15px;
     flex-grow: 1;
     flex-shrink: 1;
-
-    max-height: 279px;
 `;
 
 const TargetList = styled.ul`

src/components/intercept/config/jvm-config.tsx

@@ -13,6 +13,10 @@ import { InterceptionTargetList } from './intercept-target-list';
 
 type JvmTarget = { pid: string, name: string, interceptedByProxy: number | undefined };
 
+const JvmTargetList = styled(InterceptionTargetList)`
+    max-height: 282px;
+`;
+
 @inject('proxyStore')
 @observer
 class JvmConfig extends React.Component<{
@@ -59,7 +63,7 @@ class JvmConfig extends React.Component<{
                 Pick which JVM process you'd like to intercept:
             </p>
 
-            <InterceptionTargetList
+            <JvmTargetList
                 spinnerText='Looking for JVM processes to intercept...'
                 interceptTarget={this.interceptTarget}
                 ellipseDirection='left'

src/components/intercept/intercept-page.tsx

@@ -38,7 +38,7 @@ const InterceptPageContainer = styled.section`
         padding: 40px;
     }
 
-    grid-auto-rows: minmax(200px, auto);
+    grid-auto-rows: minmax(210px, auto);
     grid-auto-flow: row dense;
 
     max-width: 1200px;