Secret Row Column Stack

Client-portal MUI theme defaults Stack to direction=row; set direction=column explicitly for vertical layouts

Source memory file: feedback_secret_row_column_stack.md · Category: Feedback / working-preference This is a verbatim dump of Claude's persistent memory for the Octopus project. Rendered inside a code block so nothing is altered.

---
name: feedback_secret_row_column_stack
description: Client-portal MUI theme defaults Stack to direction=row; set direction=column explicitly for vertical layouts
metadata: 
  node_type: memory
  type: feedback
  originSessionId: 92cf4c96-e302-4aec-be94-535ba5e8fba7
---

In the client portal (`frontend/client/`), the MUI theme overrides `Stack` default `direction` to **`row`** (not MUI's stock `column`). Evidence: `SettingsSection`'s header `<Stack>` with no `direction` prop renders title + action button side-by-side. So a bare `<Stack spacing={n}>` lays children out **horizontally**.

**Consequence / bug seen:** the G2A `IntegrationsTabPanel` credential block (`<Stack spacing={2.5}>` with no direction) rendered Client ID / Token URL / toggle / note all in a crushed horizontal row. Fix was `direction="column"` on every stack meant to be vertical.

**How to apply:**
- Any vertical MUI `Stack` in the client portal MUST set `direction="column"` explicitly — never rely on the default.
- Credential/secret rows (`SecretRow`: label + monospace value + copy button) stack in a column, value at `width:100%` (not `flex:1`, which only stretches in a row), copy button beneath. Narrow panel + long secrets (48-char).

See [[project_g2a_import_integration.md]] for the G2A self-service credentials UI this came from.