mirror of
https://github.com/mudler/LocalAI.git
synced 2026-06-14 03:37:47 -04:00
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:
@@ -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 {
|
||||
|
||||
@@ -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',
|
||||
}}>
|
||||
{[
|
||||
|
||||
Reference in New Issue
Block a user