vrr/CodeNomad
2
0
Fork 0
mirror of https://github.com/NeuralNomadsAI/CodeNomad.git synced 2026-10-21 05:06:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(ui): retain connection dot in compact message headers (#774)

Browse source 
Keep the colored connection dot visible when the message header becomes narrow. Compact density rules now hide only the status text, preserving connected, connecting and disconnected/error feedback. Reuse translated labels for accessible image names and hover tooltips in dot-only mode.

Independent exact-head gatekeeper review passed with zero actionable findings. Seven existing header browser tests, UI typecheck and production build passed. The real InstanceShell with full styles was checked across 72 locale/state/resize combinations, including 320px and RTL, with unobscured 8px dots and accessible names verified independently. Global CI was still running at the explicitly requested admin merge.
This commit is contained in:
Pascal André 2026-09-24 22:29:33 +02:00 • committed by GitHub
parent abbfcd3711
commit c573959f58
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/ui/src/components/instance/instance-shell2.tsx
View file

@ -1102,19 +1102,19 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
/>
</div>
<Show when={connectionStatus() === "connected"}>
<span class="status-indicator connected">
<span class="status-indicator connected" role="img" aria-label={t("instanceShell.connection.connected")} title={t("instanceShell.connection.connected")}>
<span class="status-dot" />
<span class="status-text">{t("instanceShell.connection.connected")}</span>
</span>
</Show>
<Show when={connectionStatus() === "connecting"}>
<span class="status-indicator connecting">
<span class="status-indicator connecting" role="img" aria-label={t("instanceShell.connection.connecting")} title={t("instanceShell.connection.connecting")}>
<span class="status-dot" />
<span class="status-text">{t("instanceShell.connection.connecting")}</span>
</span>
</Show>
<Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
<span class="status-indicator disconnected">
<span class="status-indicator disconnected" role="img" aria-label={t("instanceShell.connection.disconnected")} title={t("instanceShell.connection.disconnected")}>
<span class="status-dot" />
<span class="status-text">{t("instanceShell.connection.disconnected")}</span>
</span>

8
packages/ui/src/styles/panels/session-layout.css
View file

@ -373,10 +373,10 @@
display: inline-block;
}
.session-center-column[data-session-header-density="1"] .session-toolbar-right .status-indicator,
.session-center-column[data-session-header-density="2"] .session-toolbar-right .status-indicator,
.session-center-column[data-session-header-density="3"] .session-toolbar-right .status-indicator,
.session-center-column[data-session-header-density="4"] .session-toolbar-right .status-indicator {
.session-center-column[data-session-header-density="1"] .session-toolbar-right .status-text,
.session-center-column[data-session-header-density="2"] .session-toolbar-right .status-text,
.session-center-column[data-session-header-density="3"] .session-toolbar-right .status-text,
.session-center-column[data-session-header-density="4"] .session-toolbar-right .status-text {
display: none;
}