fix(react-ui): stop Talk pipeline overflow and center collapsed-rail avatar (#10305)

Two small visual fixes in the React UI:

- Talk page pipeline summary: the four-column grid used
  `repeat(4, 1fr)`, which resolves to `minmax(auto, 1fr)` so each track
  refuses to shrink below the min-content width of its `nowrap` model
  name. Long names (e.g. a verbose GGUF LLM id) blew the grid out past
  the container despite the per-cell ellipsis styling. Switching to
  `minmax(0, 1fr)` lets the tracks shrink and the ellipsis take effect.

- Sidebar user avatar: the desktop collapsed look centers the avatar via
  `.sidebar.collapsed .sidebar-user{-link}` rules, but the tablet
  icon-rail (640-1023px) collapses visually through `.sidebar:not(.open)`
  without necessarily carrying the `.collapsed` class, so the avatar kept
  its left-aligned negative margins and looked misaligned. Mirror the
  centering rules under `.sidebar:not(.open)`.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Co-authored-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
LocalAI [bot]
2026-06-13 11:02:48 +02:00
committed by GitHub
parent d7162b9f89
commit 99c8205740
2 changed files with 5 additions and 1 deletions

View File

@@ -5017,6 +5017,10 @@ select.input {
}
.sidebar:not(.open) .sidebar-user-name,
.sidebar:not(.open) .sidebar-logout-btn { display: none; }
/* Center the avatar in the icon rail (mirrors .sidebar.collapsed, which
isn't necessarily present in the tablet :not(.open) state). */
.sidebar:not(.open) .sidebar-user { justify-content: center; }
.sidebar:not(.open) .sidebar-user-link { flex: 0; margin: 0; padding: 2px; }
/* Pinned open: overlay the full sidebar on top of content */
.sidebar.open {

View File

@@ -705,7 +705,7 @@ export default function Talk() {
)}
{selectedModelInfo && !selectedModelInfo.self_contained && (
<div style={{
display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--spacing-xs)',
display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 'var(--spacing-xs)',
marginBottom: 'var(--spacing-xs)', fontSize: '0.75rem',
}}>
{[