feat(site): make listening ports scrollable (#12660)

site/src/modules/resources/PortForwardButton.tsx

@@ -220,73 +220,90 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
     <>
       <div
         css={{
-          padding: 20,
+          maxHeight: 320,
+          overflowY: "auto",
         }}
       >
-        <Stack
+        <header
-          direction="row"
+          css={(theme) => ({
-          justifyContent="space-between"
+            padding: 20,
-          alignItems="start"
+            paddingBottom: 10,
+            position: "sticky",
+            top: 0,
+            background: theme.palette.background.paper,
+            // For some reason the Share button label has a higher z-index than
+            // the header. Probably some tricky stuff from MUI.
+            zIndex: 1,
+          })}
         >
-          <HelpTooltipTitle>Listening ports</HelpTooltipTitle>
+          <Stack
-          <HelpTooltipLink href={docs("/networking/port-forwarding#dashboard")}>
+            direction="row"
-            Learn more
+            justifyContent="space-between"
-          </HelpTooltipLink>
+            alignItems="start"
-        </Stack>
+          >
-        <HelpTooltipText css={{ color: theme.palette.text.secondary }}>
+            <HelpTooltipTitle>Listening ports</HelpTooltipTitle>
-          {filteredListeningPorts?.length === 0
+            <HelpTooltipLink
-            ? "No open ports were detected."
+              href={docs("/networking/port-forwarding#dashboard")}
-            : "The listening ports are exclusively accessible to you."}
+            >
-        </HelpTooltipText>
+              Learn more
-        <form
+            </HelpTooltipLink>
-          css={styles.newPortForm}
+          </Stack>
-          onSubmit={(e) => {
+          <HelpTooltipText css={{ color: theme.palette.text.secondary }}>
-            e.preventDefault();
+            {filteredListeningPorts?.length === 0
-            const formData = new FormData(e.currentTarget);
+              ? "No open ports were detected."
-            const port = Number(formData.get("portNumber"));
+              : "The listening ports are exclusively accessible to you."}
-            const url = portForwardURL(
+          </HelpTooltipText>
-              host,
+          <form
-              port,
+            css={styles.newPortForm}
-              agent.name,
+            onSubmit={(e) => {
-              workspaceName,
+              e.preventDefault();
-              username,
+              const formData = new FormData(e.currentTarget);
-            );
+              const port = Number(formData.get("portNumber"));
-            window.open(url, "_blank");
+              const url = portForwardURL(
-          }}
+                host,
-        >
+                port,
-          <input
+                agent.name,
-            aria-label="Port number"
+                workspaceName,
-            name="portNumber"
+                username,
-            type="number"
+              );
-            placeholder="Connect to port..."
+              window.open(url, "_blank");
-            min={9}
-            max={65535}
-            required
-            css={styles.newPortInput}
-          />
-          <Button
-            type="submit"
-            size="small"
-            variant="text"
-            css={{
-              paddingLeft: 12,
-              paddingRight: 12,
-              minWidth: 0,
             }}
           >
-            <OpenInNewOutlined
+            <input
-              css={{
+              aria-label="Port number"
-                flexShrink: 0,
+              name="portNumber"
-                width: 14,
+              type="number"
-                height: 14,
+              placeholder="Connect to port..."
-                color: theme.palette.text.primary,
+              min={9}
-              }}
+              max={65535}
+              required
+              css={styles.newPortInput}
             />
-          </Button>
+            <Button
-        </form>
+              type="submit"
+              size="small"
+              variant="text"
+              css={{
+                paddingLeft: 12,
+                paddingRight: 12,
+                minWidth: 0,
+              }}
+            >
+              <OpenInNewOutlined
+                css={{
+                  flexShrink: 0,
+                  width: 14,
+                  height: 14,
+                  color: theme.palette.text.primary,
+                }}
+              />
+            </Button>
+          </form>
+        </header>
         <div
           css={{
-            paddingTop: 10,
+            padding: 20,
+            paddingTop: 0,
           }}
         >
           {filteredListeningPorts?.map((port) => {

site/src/modules/resources/PortForwardPopoverView.stories.tsx

@@ -51,6 +51,24 @@ export const WithPorts: Story = {
   },
 };
 
+export const WithManyPorts: Story = {
+  args: {
+    listeningPorts: Array.from({ length: 20 }).map((_, i) => ({
+      process_name: `port-${i}`,
+      network: "",
+      port: 3000 + i,
+    })),
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["sharedPorts", MockWorkspace.id],
+        data: MockSharedPortsResponse,
+      },
+    ],
+  },
+};
+
 export const Empty: Story = {
   args: {
     listeningPorts: [],