From 99c82057409d914bf62539b7d10239c32ee11943 Mon Sep 17 00:00:00 2001
From: "LocalAI [bot]" <139863280+localai-bot@users.noreply.github.com>
Date: Sat, 13 Jun 2026 11:02:48 +0200
Subject: [PATCH] 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>
---
 core/http/react-ui/src/App.css        | 4 ++++
 core/http/react-ui/src/pages/Talk.jsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index 01528ed7b..649174b1d 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -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 {
diff --git a/core/http/react-ui/src/pages/Talk.jsx b/core/http/react-ui/src/pages/Talk.jsx
index f03af37ca..f8e49e102 100644
--- a/core/http/react-ui/src/pages/Talk.jsx
+++ b/core/http/react-ui/src/pages/Talk.jsx
@@ -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',
             }}>
               {[