fix(web): keep browser layout within viewport

Author: skulidropek

packages/app/src/ui/primitives-web.tsx

@@ -9,7 +9,7 @@ const unit = (value: number | string | undefined): string | number | undefined =
   return typeof value === "number" ? `${value * 8}px` : value
 }
 
-const borderRadius = (borderStyle: UiBoxProps["borderStyle"]): string => borderStyle === "rounded" ? "12px" : "0"
+const borderRadius = (borderStyle: UiBoxProps["borderStyle"]): string => borderStyle === "rounded" ? "8px" : "0"
 
 const borderValue = (
   enabled: boolean | undefined,
@@ -24,8 +24,10 @@ const baseStyle = (props: UiBoxProps): CSSProperties => ({
   boxSizing: "border-box",
   color: props.fg,
   display: "flex",
+  flexBasis: props.flexBasis,
   flexDirection: props.flexDirection ?? "row",
   flexGrow: props.flexGrow,
+  flexShrink: props.flexShrink,
   flexWrap: props.flexWrap,
   gap: unit(props.gap),
   height: unit(props.height),
@@ -34,6 +36,13 @@ const baseStyle = (props: UiBoxProps): CSSProperties => ({
   marginLeft: unit(props.marginLeft),
   marginRight: unit(props.marginRight),
   marginTop: unit(props.marginTop),
+  maxHeight: unit(props.maxHeight),
+  maxWidth: unit(props.maxWidth),
+  minHeight: unit(props.minHeight),
+  minWidth: unit(props.minWidth),
+  overflow: props.overflow,
+  overflowX: props.overflowX,
+  overflowY: props.overflowY,
   padding: unit(props.padding),
   width: unit(props.width)
 })
@@ -60,7 +69,7 @@ const interactiveStyle = (width: UiBoxProps["width"]): CSSProperties => ({
 const inputStyle: CSSProperties = {
   background: "#07101c",
   border: "1px solid #24537d",
-  borderRadius: "10px",
+  borderRadius: "8px",
   boxSizing: "border-box",
   color: "#56f39a",
   font: "inherit",

packages/app/src/ui/primitives.tsx

@@ -16,8 +16,10 @@ export type UiBoxProps = {
   readonly borderStyle?: "rounded" | "single"
   readonly children?: ReactNode
   readonly fg?: string
+  readonly flexBasis?: CSSProperties["flexBasis"]
   readonly flexDirection?: CSSProperties["flexDirection"]
   readonly flexGrow?: number
+  readonly flexShrink?: number
   readonly flexWrap?: CSSProperties["flexWrap"]
   readonly gap?: number | string
   readonly height?: number | string
@@ -26,7 +28,14 @@ export type UiBoxProps = {
   readonly marginLeft?: number | string
   readonly marginRight?: number | string
   readonly marginTop?: number | string
+  readonly maxHeight?: number | string
+  readonly maxWidth?: number | string
+  readonly minHeight?: number | string
+  readonly minWidth?: number | string
   readonly onClick?: MouseEventHandler<HTMLElement> | (() => void)
+  readonly overflow?: CSSProperties["overflow"]
+  readonly overflowX?: CSSProperties["overflowX"]
+  readonly overflowY?: CSSProperties["overflowY"]
   readonly padding?: number | string
   readonly width?: number | string
 }

packages/app/src/web/app-ready-layout.tsx

@@ -7,12 +7,12 @@ import { MainPanels } from "./app-ready-main-panels.js"
 import { Box, Text } from "./elements.js"
 import type { BrowserMenuTag } from "./menu.js"
 import type { ActiveTerminalSession } from "./terminal.js"
+import type { ViewportLayout } from "./viewport-layout.js"
 
 export type ReadyLayoutProps = {
   readonly actionPrompt: ActionPromptState | null
   readonly authSnapshot: AuthSnapshot | null
   readonly busyLabel: string | null
-  readonly compact: boolean
   readonly controllerCwd: string
   readonly projectsRoot: string
   readonly createView: CreateFlowView
@@ -40,39 +40,75 @@ export type ReadyLayoutProps = {
   readonly selectedProjectId: string | null
   readonly selectedProjectSummary: DashboardData["projects"][number] | undefined
   readonly terminalSession: ActiveTerminalSession | null
+  readonly viewportLayout: ViewportLayout
 }
 
+const headerPadding = (viewportLayout: ViewportLayout): number | string =>
+  viewportLayout.compact || viewportLayout.dense ? "6px" : 1
+
+const headerGap = (viewportLayout: ViewportLayout): number => viewportLayout.compact ? 1 : 2
+
+const headerMetricsTopMargin = (viewportLayout: ViewportLayout): number | string => viewportLayout.compact ? "4px" : 1
+
+const HeaderTitle = ({ compact }: Pick<ViewportLayout, "compact">): JSX.Element => (
+  <Box flexWrap="wrap" gap={1} justifyContent="space-between">
+    <Text bold={true} fg="#f6fbff">docker-git browser</Text>
+    {compact ? null : <Text fg="#7fdfff">Gridland menu shell</Text>}
+  </Box>
+)
+
+const StatusText = ({ busyLabel }: Pick<ReadyLayoutProps, "busyLabel">): JSX.Element => (
+  <Text fg={busyLabel === null ? "#8fa6c4" : "#ffd166"}>{busyLabel ?? "idle"}</Text>
+)
+
+const HeaderMetrics = (
+  { busyLabel, dashboard, viewportLayout }: Pick<ReadyLayoutProps, "busyLabel" | "dashboard" | "viewportLayout">
+): JSX.Element => (
+  <Box flexWrap="wrap" gap={headerGap(viewportLayout)} marginTop={headerMetricsTopMargin(viewportLayout)}>
+    <Text fg="#9fd7ff" wrap="truncate">API: {dashboard.apiBaseUrl}</Text>
+    <Text fg="#56f39a">health: ok</Text>
+    <Text fg="#ffd166" wrap="truncate">revision: {dashboard.health.revision ?? "none"}</Text>
+    <Text fg="#d4e3f4">projects: {dashboard.projects.length}</Text>
+    {viewportLayout.compact ? null : <Text fg="#7fa8cf">refresh: 15s</Text>}
+    <StatusText busyLabel={busyLabel} />
+  </Box>
+)
+
+const HeaderMessage = ({ message }: Pick<ReadyLayoutProps, "message">): JSX.Element | null =>
+  message === null
+    ? null
+    : <Text fg="#f6d27b" marginTop="4px" wrap="truncate">message: {message}</Text>
+
 const StatusHeader = (
-  { busyLabel, dashboard, message }: Pick<ReadyLayoutProps, "busyLabel" | "dashboard" | "message">
+  { busyLabel, dashboard, message, viewportLayout }: Pick<
+    ReadyLayoutProps,
+    "busyLabel" | "dashboard" | "message" | "viewportLayout"
+  >
 ): JSX.Element => (
   <Box
     backgroundColor="#0a1730"
     border={true}
     borderColor="#39d0ff"
     borderStyle="rounded"
     flexDirection="column"
+    flexShrink={0}
     marginBottom={1}
-    padding={1}
+    padding={headerPadding(viewportLayout)}
   >
-    <Box justifyContent="space-between">
-      <Text bold={true} fg="#f6fbff">docker-git browser</Text>
-      <Text fg="#7fdfff">Gridland menu shell</Text>
-    </Box>
-    <Text fg="#9fd7ff">API: {dashboard.apiBaseUrl}</Text>
-    <Box gap={2} marginTop={1}>
-      <Text fg="#56f39a">health: ok</Text>
-      <Text fg="#ffd166">revision: {dashboard.health.revision ?? "none"}</Text>
-      <Text fg="#d4e3f4">projects: {dashboard.projects.length}</Text>
-      <Text fg="#7fa8cf">refresh: 15s</Text>
-      <Text fg={busyLabel === null ? "#8fa6c4" : "#ffd166"}>{busyLabel ?? "idle"}</Text>
-    </Box>
-    {message === null ? null : <Text fg="#f6d27b">message: {message}</Text>}
+    <HeaderTitle compact={viewportLayout.compact} />
+    <HeaderMetrics busyLabel={busyLabel} dashboard={dashboard} viewportLayout={viewportLayout} />
+    <HeaderMessage message={message} />
   </Box>
 )
 
 export const ReadyLayout = ({ busyLabel, message, ...props }: ReadyLayoutProps): JSX.Element => (
-  <Box flexDirection="column" height="100%" padding={1} width="100%">
-    <StatusHeader busyLabel={busyLabel} dashboard={props.dashboard} message={message} />
+  <Box flexDirection="column" height="100%" minHeight={0} overflow="hidden" padding={1} width="100%">
+    <StatusHeader
+      busyLabel={busyLabel}
+      dashboard={props.dashboard}
+      message={message}
+      viewportLayout={props.viewportLayout}
+    />
     <MainPanels {...props} />
   </Box>
 )

packages/app/src/web/app-ready-main-panels.tsx

@@ -19,7 +19,6 @@ type CenterPanelProps =
     MainPanelsProps,
     | "actionPrompt"
     | "authSnapshot"
-    | "compact"
     | "createView"
     | "controllerCwd"
     | "projectsRoot"
@@ -41,6 +40,7 @@ type CenterPanelProps =
     | "projectAuthSnapshot"
     | "selectedProjectSummary"
     | "terminalSession"
+    | "viewportLayout"
   >
   & {
     readonly showProjectPanel: boolean
@@ -55,7 +55,6 @@ type CenterPanelContentProps = Pick<
   CenterPanelProps,
   | "actionPrompt"
   | "authSnapshot"
-  | "compact"
   | "controllerCwd"
   | "createView"
   | "currentMenu"
@@ -73,6 +72,7 @@ type CenterPanelContentProps = Pick<
   | "projectNavigationArmed"
   | "projectsRoot"
   | "selectedProjectSummary"
+  | "viewportLayout"
 >
 
 const CenterPanelBody = (
@@ -95,7 +95,6 @@ const CenterPanelContent = (
   {
     actionPrompt,
     authSnapshot,
-    compact,
     controllerCwd,
     createView,
     currentMenu,
@@ -112,13 +111,14 @@ const CenterPanelContent = (
     projectAuthSnapshot,
     projectNavigationArmed,
     projectsRoot,
-    selectedProjectSummary
+    selectedProjectSummary,
+    viewportLayout
   }: CenterPanelContentProps
 ): JSX.Element => (
   <ContentPanel
     actionPrompt={actionPrompt}
     authSnapshot={authSnapshot}
-    compact={compact}
+    compact={viewportLayout.compact}
     controllerCwd={controllerCwd}
     createView={createView}
     currentMenu={currentMenu}
@@ -143,7 +143,7 @@ const centerPanelWidth = (compact: boolean, showProjectPanel: boolean): string =
   if (compact) {
     return "100%"
   }
-  return showProjectPanel ? "42%" : "69%"
+  return showProjectPanel ? "48%" : "auto"
 }
 
 const CenterPanel = (props: CenterPanelProps): JSX.Element => (
@@ -152,27 +152,45 @@ const CenterPanel = (props: CenterPanelProps): JSX.Element => (
     borderColor="#24537d"
     borderStyle="single"
     flexDirection="column"
+    flexGrow={1}
+    minHeight={0}
+    minWidth={0}
+    overflow="hidden"
     padding={1}
-    width={centerPanelWidth(props.compact, props.showProjectPanel)}
+    width={centerPanelWidth(props.viewportLayout.compact, props.showProjectPanel)}
   >
-    <CenterPanelContent {...props} />
-    <CenterPanelBody {...props} />
+    <Box
+      flexDirection="column"
+      flexShrink={0}
+      maxHeight={props.viewportLayout.dense ? "38%" : "46%"}
+      overflowY="auto"
+    >
+      <CenterPanelContent {...props} />
+    </Box>
+    <Box flexDirection="column" flexGrow={1} minHeight={0} overflow="hidden">
+      <CenterPanelBody {...props} />
+    </Box>
   </Box>
 )
 
 const ProjectPanelSlot = (
   {
-    compact,
     currentMenu,
     dashboard,
     onSelectProject,
     projectNavigationArmed,
     selectedProjectId,
-    showProjectPanel
+    showProjectPanel,
+    viewportLayout
   }:
     & Pick<
       MainPanelsProps,
-      "compact" | "currentMenu" | "dashboard" | "onSelectProject" | "projectNavigationArmed" | "selectedProjectId"
+      | "currentMenu"
+      | "dashboard"
+      | "onSelectProject"
+      | "projectNavigationArmed"
+      | "selectedProjectId"
+      | "viewportLayout"
     >
     & {
       readonly showProjectPanel: boolean
@@ -181,7 +199,7 @@ const ProjectPanelSlot = (
   showProjectPanel
     ? (
       <ProjectListPanel
-        compact={compact}
+        compact={viewportLayout.compact}
         currentMenu={currentMenu}
         dashboard={dashboard}
         onSelectProject={onSelectProject}
@@ -205,7 +223,6 @@ const MainCenterPanel = (
   <CenterPanel
     actionPrompt={props.actionPrompt}
     authSnapshot={props.authSnapshot}
-    compact={props.compact}
     controllerCwd={props.controllerCwd}
     projectsRoot={props.projectsRoot}
     createView={props.createView}
@@ -228,15 +245,22 @@ const MainCenterPanel = (
     selectedProjectSummary={selectedProjectSummary}
     showProjectPanel={showProjectPanel}
     terminalSession={props.terminalSession}
+    viewportLayout={props.viewportLayout}
   />
 )
 
 export const MainPanels = ({ selectedProjectSummary, ...props }: MainPanelsProps): JSX.Element => {
   const showProject = showsProjectPanel(props.currentMenu)
   return (
-    <Box flexDirection={props.compact ? "column" : "row"} flexGrow={1} gap={1}>
+    <Box
+      flexDirection={props.viewportLayout.compact ? "column" : "row"}
+      flexGrow={1}
+      gap={1}
+      minHeight={0}
+      overflow="hidden"
+    >
       <MenuSidebar
-        compact={props.compact}
+        compact={props.viewportLayout.compact}
         currentMenu={props.currentMenu}
         onSelectMenu={props.onSelectMenu}
         projectNavigationArmed={props.projectNavigationArmed}
@@ -245,13 +269,13 @@ export const MainPanels = ({ selectedProjectSummary, ...props }: MainPanelsProps
       />
       <MainCenterPanel props={props} selectedProjectSummary={selectedProjectSummary} showProjectPanel={showProject} />
       <ProjectPanelSlot
-        compact={props.compact}
         currentMenu={props.currentMenu}
         dashboard={props.dashboard}
         onSelectProject={props.onSelectProject}
         projectNavigationArmed={props.projectNavigationArmed}
         selectedProjectId={props.selectedProjectId}
         showProjectPanel={showProject}
+        viewportLayout={props.viewportLayout}
       />
     </Box>
   )