Enable scrolling content in popup window

Author: kuba2k2

src/messaging/popup.ts

@@ -24,7 +24,7 @@ export async function sendToPopup(message: PopupRequest): Promise<any> {
 		top: anchor.top,
 		left: anchor.left,
 		width: 400,
-		height: 400,
+		height: 450,
 		allowScriptsToClose: true,
 	})
 

src/ui/components/Common.tsx

@@ -7,12 +7,31 @@ export type CommonProps = {
 	reject: (reason?: any) => void
 } & PopupRequest
 
+export const MainContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+`
+
 export const MessageContainer = styled.div`
+	flex: 0 0 auto;
+	margin: 0 12px;
 	position: relative;
 	min-height: 40px;
 	padding-right: 56px;
 `
 
+export const MessageDivider = styled.hr`
+	height: 2px;
+	margin: 8px 12px 0;
+`
+
+export const ListContainer = styled.div`
+	flex: 1 1 auto;
+	overflow: auto;
+	padding: 8px 12px;
+`
+
 export const ReloadButton = styled(Button)`
 	position: absolute;
 	top: 50%;
@@ -22,10 +41,7 @@ export const ReloadButton = styled(Button)`
 
 export const ButtonContainer = styled.div`
 	display: flex;
-	position: absolute;
-	bottom: 12px;
-	left: 12px;
-	right: 12px;
+	padding: 12px;
 `
 
 export const ButtonSpacer = styled.span`

src/ui/controls/List.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components"
 
 const Container = styled.ul`
 	list-style-type: none;
+	margin: -8px -8px;
 	padding: 0;
-	margin: 0 -8px;
 `
 
 const Item = styled.li<{ $active: boolean }>`

src/ui/index.scss

@@ -1,10 +1,15 @@
+html {
+	height: 100%;
+}
+
 body {
 	width: 100%;
+	height: 100%;
 	user-select: none;
 }
 
 #root {
-	padding: 0 12px;
+	height: 100%;
 }
 
 h2,

src/ui/pages/PortChooser.tsx

@@ -7,7 +7,10 @@ import {
 	ButtonMessage,
 	ButtonSpacer,
 	CommonProps,
+	ListContainer,
+	MainContainer,
 	MessageContainer,
+	MessageDivider,
 	ReloadButton,
 } from "../components/Common"
 import { NativeInfo } from "../components/NativeInfo"
@@ -80,7 +83,7 @@ export class PortChooser extends React.Component<
 		}
 
 		return (
-			<div>
+			<MainContainer>
 				<MessageContainer>
 					<h4>{hostname ?? "A website"}</h4>
 					<small>
@@ -89,34 +92,36 @@ export class PortChooser extends React.Component<
 					<ReloadButton icon="reload" onClick={this.handleRefresh} />
 				</MessageContainer>
 
-				<hr />
+				<MessageDivider />
 
-				{!this.state.params &&
-					!this.state.ports &&
-					!this.state.error && (
-						<small>Looking for serial ports...</small>
-					)}
-				{this.state.params && !this.state.ports && (
-					<NativeInstaller {...this.state.params} />
-				)}
-				{this.state.ports && (
-					<List
-						items={this.state.ports.map(
-							(port) => port.description || port.name
+				<ListContainer>
+					{!this.state.params &&
+						!this.state.ports &&
+						!this.state.error && (
+							<small>Looking for serial ports...</small>
 						)}
-						active={this.state.active}
-						onClick={this.handleItemClick}
-					/>
-				)}
-				{this.state.ports && this.state.ports.length == 0 && (
-					<small>No serial ports found</small>
-				)}
-				{this.state.error && (
-					<small>
-						Failed to enumerate serial ports:{" "}
-						{`${this.state.error}`}
-					</small>
-				)}
+					{this.state.params && !this.state.ports && (
+						<NativeInstaller {...this.state.params} />
+					)}
+					{this.state.ports && (
+						<List
+							items={this.state.ports.map(
+								(port) => port.description || port.name
+							)}
+							active={this.state.active}
+							onClick={this.handleItemClick}
+						/>
+					)}
+					{this.state.ports && this.state.ports.length == 0 && (
+						<small>No serial ports found</small>
+					)}
+					{this.state.error && (
+						<small>
+							Failed to enumerate serial ports:{" "}
+							{`${this.state.error}`}
+						</small>
+					)}
+				</ListContainer>
 
 				<ButtonContainer>
 					<ButtonMessage>
@@ -135,7 +140,7 @@ export class PortChooser extends React.Component<
 						onClick={this.handleOkClick}
 					/>
 				</ButtonContainer>
-			</div>
+			</MainContainer>
 		)
 	}
 }