# UI consistency rules

## 1. No dropdown menus for choices or navigation (modals only)

Use **modals** for picking options, account actions, repository sections, clone URLs, and similar flows. Match existing patterns: `glass-modal` shell, clear title, scrollable body, footer with **`glass-button`** for cancel/secondary actions and the same primary button styles as other modals (e.g. `glass-button-primary` where appropriate).

Do **not** add decorative **colored box-shadow “glow”** on modal chrome or buttons beyond what existing modals already use.

## 2. Glow

- **Avoid** accent or box-shadow glow on **interactive controls** and **modal chrome** (keep buttons aligned with existing modals).
- **Allowed separately:** ambient page background effects (e.g. `bg-glow`), and the user **cursor preset** named “glow” — those are not the same as glowing primary buttons.

## 3. The only allowed dropdown: @mentions

> “Keep mentions as a dropdown this is the only acceptable use of dropdown in project”

The **@username** autocomplete while typing in comments, issues, and other text fields **must remain a floating overlay** (not a full-screen modal) so typing flow stays like GitHub or Discord. It should follow **user theme tokens** (glass, borders, text colors) and anchor **near the text caret**.

No other dropdown-style menus should be added for choice/navigation UI; use a modal instead.

## 4. No hover “lift” on dropdown-replacement modals

Modals that **replace** dropdowns or host the **global option picker** (`#global-select-picker-modal`), **header account/auth** menus, **mobile repo section** navigation, and **`modal-select-trigger`** controls must **not** use a hover **lift** effect on their buttons: no **`transform: translateY(...)`** (or similar) and no **extra hover box-shadow** used to suggest elevation.

- Prefer **`glass-button no-hover-lift`** for cancel/secondary actions in those shells, and keep **`modal_picker.js`** option rows as flat rows (background/border only; no hover translate).
- Shared CSS lives in **`templates/partials/_modal_dropdown_replacement_no_lift_css.html`** (included from `base.html`, `repository/repo_layout.html`, and `first_time_setup.html`). Extend that partial if you add another “menu-as-modal” surface with `glass-button`.
