[GH-ISSUE #23904] Mobile: Suggested prompts render as single-character columns at ~375px viewport (ChatPlaceholder grid-cols-2 + px-8 padding) #107095

New Issue

GiteaMirror · 2026-05-18T05:38:08-05:00

GiteaMirror commented

2026-05-18 05:38:08 -05:00

Originally created by @jonalmar on GitHub (Apr 21, 2026).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/23904

Bug Description

On iPhone-width viewports (~375px), the suggested prompts section below the composer renders each prompt as an extremely narrow column — only the first 1–2 characters of each prompt title are visible. The prompts are unreadable and unusable on mobile.

Repro

Load Open WebUI in Chrome DevTools with device toolbar set to 375px width (iPhone SE / iPhone 12 mini sizing)
Navigate to a new chat with a workspace agent that has suggestion_prompts configured
Observe the Suggested section below the message composer — each prompt card shows only the first character of its title

Suspected Root Cause

File: src/lib/components/chat/ChatPlaceholder.svelte
Line ~37 (outer wrapper):

<div class="m-auto w-full max-w-6xl px-8 lg:px-20">

At 375px viewport: px-8 = 32px × 2 = 64px of padding → available width = 311px

Line ~101 (Suggestions call):

<Suggestions
  className="grid grid-cols-2"
  ...
/>

File: src/lib/components/chat/Suggestions.svelte
Line ~82 (list container):

<div role="list" class="max-h-40 overflow-auto scrollbar-none items-start {className}">

className="grid grid-cols-2" is applied directly on the overflow container. At 311px available width, grid-cols-2 creates two columns of ~155px each. Each prompt <button> has px-3 (24px total), leaving ~131px for text — which should be readable.

However, there is an additional constraint: the grid container itself may not establish width correctly inside the flex-column layout on mobile, especially when:

The parent div uses flex items-center gap-4 (line ~72 in ChatPlaceholder)
On narrow viewports the flex layout doesn't properly propagate the parent width to the grid

The symptom of only one character per column suggests the grid columns are collapsing to near-zero width rather than the expected ~155px, which can happen when grid is applied to a container without min-w-0 inside a flex item.

Likely Fix

In ChatPlaceholder.svelte, the Suggestions wrapper <div class="w-full font-primary"> should work, but the intermediate flex container (line ~72) may need min-w-0 or w-full to prevent column collapse:

<!-- ChatPlaceholder.svelte ~L72 -->
<div class="mt-2 mb-4 text-3xl ... flex items-center gap-4 font-primary min-w-0 w-full">
  <div class="min-w-0 w-full">
    ...
  </div>
</div>

Alternatively, the px-8 padding on mobile could be reduced (e.g., px-4 sm:px-8) to give columns more breathing room.

Note: Placeholder.svelte (the new-chat landing page) does NOT pass className to Suggestions, so the grid is only applied via ChatPlaceholder.svelte when using workspace agents.

Environment

OWU image: ghcr.io/open-webui/open-webui:main (pulled ~2026-04-14)
Viewport: 375px (iPhone SE / iPhone 12 mini)
Context: Workspace agent with custom suggestion_prompts, PWA installed to home screen
Device: Observed on iOS Safari PWA; analysis confirmed via source code inspection

Impact

Any user who:

Uses workspace agents with custom suggestion prompts, AND
Accesses OWU from a mobile device at ~375px width

…will see the suggestions section as unreadable single-character fragments.

Files

src/lib/components/chat/ChatPlaceholder.svelte — passes className="grid grid-cols-2" and uses px-8 on outer wrapper
src/lib/components/chat/Suggestions.svelte — applies className directly to the div role="list" container (line ~82)

Originally created by @jonalmar on GitHub (Apr 21, 2026). Original GitHub issue: https://github.com/open-webui/open-webui/issues/23904 ## Bug Description On iPhone-width viewports (~375px), the suggested prompts section below the composer renders each prompt as an extremely narrow column — only the first 1–2 characters of each prompt title are visible. The prompts are unreadable and unusable on mobile. ## Repro 1. Load Open WebUI in Chrome DevTools with device toolbar set to **375px width** (iPhone SE / iPhone 12 mini sizing) 2. Navigate to a new chat with a workspace agent that has `suggestion_prompts` configured 3. Observe the `Suggested` section below the message composer — each prompt card shows only the first character of its title ## Suspected Root Cause **File:** `src/lib/components/chat/ChatPlaceholder.svelte` **Line ~37 (outer wrapper):** ```html <div class="m-auto w-full max-w-6xl px-8 lg:px-20"> ``` At 375px viewport: `px-8` = 32px × 2 = 64px of padding → available width = **311px** **Line ~101 (Suggestions call):** ```svelte <Suggestions className="grid grid-cols-2" ... /> ``` **File:** `src/lib/components/chat/Suggestions.svelte` **Line ~82 (list container):** ```html <div role="list" class="max-h-40 overflow-auto scrollbar-none items-start {className}"> ``` `className="grid grid-cols-2"` is applied directly on the overflow container. At 311px available width, `grid-cols-2` creates two columns of ~155px each. Each prompt `<button>` has `px-3` (24px total), leaving ~131px for text — which should be readable. **However**, there is an additional constraint: the grid container itself may not establish width correctly inside the flex-column layout on mobile, especially when: - The parent `div` uses `flex items-center gap-4` (line ~72 in ChatPlaceholder) - On narrow viewports the flex layout doesn't properly propagate the parent width to the grid The symptom of only **one character per column** suggests the grid columns are collapsing to near-zero width rather than the expected ~155px, which can happen when `grid` is applied to a container without `min-w-0` inside a flex item. ## Likely Fix In `ChatPlaceholder.svelte`, the Suggestions wrapper `<div class="w-full font-primary">` should work, but the intermediate flex container (line ~72) may need `min-w-0` or `w-full` to prevent column collapse: ```html  <div class="mt-2 mb-4 text-3xl ... flex items-center gap-4 font-primary min-w-0 w-full"> <div class="min-w-0 w-full"> ... </div> </div> ``` Alternatively, the `px-8` padding on mobile could be reduced (e.g., `px-4 sm:px-8`) to give columns more breathing room. **Note:** `Placeholder.svelte` (the new-chat landing page) does NOT pass `className` to `Suggestions`, so the grid is only applied via `ChatPlaceholder.svelte` when using workspace agents. ## Environment - **OWU image:** `ghcr.io/open-webui/open-webui:main` (pulled ~2026-04-14) - **Viewport:** 375px (iPhone SE / iPhone 12 mini) - **Context:** Workspace agent with custom `suggestion_prompts`, PWA installed to home screen - **Device:** Observed on iOS Safari PWA; analysis confirmed via source code inspection ## Impact Any user who: 1. Uses workspace agents with custom suggestion prompts, AND 2. Accesses OWU from a mobile device at ~375px width …will see the suggestions section as unreadable single-character fragments. ## Files - `src/lib/components/chat/ChatPlaceholder.svelte` — passes `className="grid grid-cols-2"` and uses `px-8` on outer wrapper - `src/lib/components/chat/Suggestions.svelte` — applies `className` directly to the `div role="list"` container (line ~82)

GiteaMirror closed this issue

2026-05-18 05:38:09 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#107095