tai/research/tui-framework-design/za-tui-app-styles.md

# za-tui app.tcss — sidebar/chat/input proportions

## Metadata

| Field | Value |
|---|---|
| Institute | Molodetz Institute — Research & Retrieval Division |
| Subject | tui-framework-design |
| Document type | Source Dossier |
| Tier | 1 |
| Source title | za-tui app.tcss — application stylesheet (Textual Zalo client) |
| Source URL | https://raw.githubusercontent.com/buihongduc132/za-tui/main/src/za_tui/app.tcss |
| Source publisher / author | buihongduc132 (za-tui project) |
| Source type | repository |
| Source date (published) | Unknown — not stated |
| Date researched | 2026-10-11 |
| Researched by | tai (agent), model: Muse Spark, on behalf of retoor |
| Research method | direct page fetch |
| Confidence | Medium |
| Status | Active |

## Summary

The stylesheet behind a Textual messaging client: a 30% sidebar beside a 70% chat area, the chat area stacking a `1fr` transcript over an auto-height input clamped to 3–8 rows, with a 1-row status bar. A thin source whose numbers corroborate the ratatui clients.

## Key findings

- Sidebar takes 30% width, chat area 70%.
- Chat area is a vertical stack: `ChatView` at `1fr` over an `InputBar` with automatic height clamped to 3–8 rows.
- The status bar has a fixed height of 1 row.

## Pros / strengths

- Independent corroboration (Textual/CSS rather than ratatui) of the same 30/70 + growing-input + 1-line-status geometry.
- The 3–8 row input clamp gives a concrete growth range.

## Cons / limitations / caveats

- Stylesheet only: no behavior, keymap, or rendering logic visible here; the companion `.py` widgets carry those.

## Relevance to tai

- Cross-framework confirmation of the layout numbers adopted in the messaging-layout conclusion; the 3–8 clamp informs tai's input growth range.

## Changelog

| Date | Change |
|---|---|
| 2026-10-11 | Initial dossier created from 2026-10-11 research-pass evidence (body opened via web_fetch by researching agent). |