UI text overflow

[ngoiyaeric]

Based on the codebase, UI text overflow is primarily handled through CSS styling and responsive design patterns, with specific attention to mobile layouts.

Text Overflow Handling

Mobile Layout CSS

The mobile layout in app/globals.css includes several overflow handling mechanisms:

• Mobile icons bar: Uses overflow-x: auto with hidden scrollbars for horizontal scrolling 1
• Chat messages area: Uses overflow-y: auto for vertical scrolling 2
• Text wrapping: Components use whitespace-normal and break-words for proper text flow 3

Component-Level Handling

• Search related queries: Uses whitespace-normal and text-left for proper text wrapping 4
• Chat input: Implements responsive maxRows (3 on mobile, 5 on desktop) to prevent excessive vertical expansion 5
• File names: Uses truncate and max-w-xs to prevent long filenames from overflowing 6

Responsive Testing

The codebase includes specific tests for text overflow on small screens (320px width), verifying that message boxes don't exceed viewport width 7

Notes

The overflow handling is primarily CSS-based with Tailwind utilities, focusing on mobile-first responsive design. The test suite validates overflow behavior on extremely small screens (iPhone 5/SE dimensions).

Wiki pages you might want to explore:

• Data Management and Persistence (QueueLab/QCX)

Citations

File: app/globals.css (L136-143)

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .mobile-icons-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

File: app/globals.css (L180-188)

  .mobile-chat-messages-area {
    flex: 1; /* Changed from height: 40vh to take available space */
    overflow-y: auto;
    padding: 12px;
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-sizing: border-box;
    min-height: 0;
  }

File: components/calendar-notepad.tsx (L160-160)

                  <p className="text-sm whitespace-pre-wrap break-words">{note.content}</p>

File: components/search-related.tsx (L54-54)

              className="flex-1 justify-start px-0 py-1 h-fit font-semibold text-accent-foreground/50 whitespace-normal text-left"

File: components/chat-panel.tsx (L236-236)

            maxRows={isMobile ? 3 : 5}

File: components/chat-panel.tsx (L295-295)

            <span className="text-sm text-muted-foreground truncate max-w-xs">

File: tests/responsive.spec.ts (L211-224)

  test('should not have text overflow', async ({ page }) => {
    await page.fill('[data-testid="chat-input"]', 'This is a longer message to test text wrapping on very small mobile screens');
    await page.click('[data-testid="mobile-submit-button"]');

    const userMessage = page.locator('[data-testid="user-message"]').last();
    await expect(userMessage).toBeVisible();

    // Check that text wraps and doesn't overflow
    const messageBox = await userMessage.boundingBox();
    expect(messageBox).toBeTruthy();
    if (messageBox) {
      expect(messageBox.width).toBeLessThanOrEqual(320);
    }
  });

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Apply existing Tailwind overflow patterns (truncate, line-clamp-2, overflow-hidden) to components identified as lacking protection
• Replace fixed-width constraints with responsive alternatives where appropriate
• Add defensive overflow-hidden to container elements that could leak wide content
• Extend responsive test coverage to prevent regression on narrow viewports

Implementation Steps

Phase 1: Fix Component-Level Text Overflow Gaps

Address the specific overflow vulnerabilities identified during codebase exploration by applying consistent patterns already established elsewhere in the codebase.

Task 1: Make File Name Truncation Responsive in Chat Panel

The current max-w-xs (320px fixed width) for file names can overflow on very narrow screens or waste space on wider ones.

• Update components/chat-panel.tsx file name display span (around line 295) to replace max-w-xs with a responsive width constraint
• Use a percentage-based or viewport-relative approach such as max-w-[60%] or max-w-[calc(100%-4rem)] to account for the clear button
• Retain the existing truncate class for ellipsis behavior

Task 2: Add Overflow Protection to Dialog Query Strings

The DialogDescription elements in video and image search results render raw query strings without overflow protection, risking layout breakage on long queries.

• Update components/video-search-results.tsx DialogDescription (around line 121-123) to add truncate or line-clamp-2 class depending on desired behavior
• Update components/search-results-image.tsx DialogDescription (around line 101) with the same overflow protection pattern
• Follow the existing line-clamp-2 pattern used for titles in these same components for consistency

Task 3: Add Overflow Protection to Calendar Notepad Elements

The timestamp element and outer containers in the calendar notepad component lack overflow guards.

• Update components/calendar-notepad.tsx timestamp paragraph (around line 157-158) to add truncate class
• Add overflow-hidden to the note card container div (around line 154) to prevent edge cases where extremely wide unbreakable tokens escape despite break-words
• Add overflow-hidden to the outer card container (around line 95) as a defensive measure

🤖 Prompt for AI agents

Fix text overflow vulnerabilities in three components by applying Tailwind CSS
overflow utility classes consistent with established patterns in the codebase.

**Task 1: `components/chat-panel.tsx` (around line 295)**
- Locate the file name display `<span>` that currently uses `max-w-xs`
- Replace `max-w-xs` with a responsive, percentage-based constraint such as
`max-w-[60%]` or `max-w-[calc(100%-4rem)]` to accommodate the clear button at
all screen sizes
- Keep the existing `truncate` class intact for ellipsis behavior

**Task 2: `components/video-search-results.tsx` (around lines 121-123) and
`components/search-results-image.tsx` (around line 101)**
- Locate the `DialogDescription` elements that render raw query strings
- Add `truncate` or `line-clamp-2` to each `DialogDescription` to prevent
overflow on long queries
- Follow the existing `line-clamp-2` pattern already used on titles within these
same components for consistency

**Task 3: `components/calendar-notepad.tsx`**
- Locate the timestamp `<p>` element (around lines 157-158) and add the
`truncate` class
- Locate the note card container `<div>` (around line 154) and add
`overflow-hidden` to prevent wide unbreakable tokens from escaping despite
`break-words`
- Locate the outer card container `<div>` (around line 95) and add
`overflow-hidden` as a defensive measure

Phase 2: Extend Responsive Test Coverage

Add targeted tests to validate the overflow fixes and prevent regression.

Add Overflow Tests for Fixed Components

Extend the responsive test suite to cover the newly protected elements.

• Add a new test in tests/responsive.spec.ts within the "Small Mobile" (320px) describe block to verify file attachment names do not overflow
• Add a test to verify dialog descriptions in search results do not cause horizontal scroll when queries are long
• Follow existing test patterns: use data-testid selectors, boundingBox() width assertions, and document.body.scrollWidth checks
• Gate tests with if (await element.isVisible()) for elements that may not always be present

🤖 Prompt for AI agents

Extend `tests/responsive.spec.ts` with new tests that validate the overflow
fixes from Phase 1 and guard against future regressions.

- Inside the existing "Small Mobile" (320px) `describe` block, add a new test to
verify that file attachment names in the chat panel do not overflow their
container
- Add a test to verify that `DialogDescription` elements in video and image
search results do not cause horizontal scroll when populated with long query
strings
- Use `data-testid` selectors to target elements, `boundingBox()` for width
assertions, and `document.body.scrollWidth` checks consistent with existing test
patterns
- Wrap assertions for conditionally-rendered elements with `if (await
element.isVisible())` guards to avoid false failures when those elements are not
present

Research

The codebase uses Tailwind CSS utilities for text overflow handling, with established patterns including truncate for single-line ellipsis, line-clamp-2 for multi-line clamping, break-words for word wrapping, and overflow-x-auto for horizontal scrolling. Most overflow handling is component-level via Tailwind classes rather than global CSS rules. The responsive test suite in tests/responsive.spec.ts validates overflow behavior at multiple viewport sizes (320px–2560px) using bounding box assertions and document.body.scrollWidth checks.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Fix text overflow vulnerabilities in three components by applying Tailwind CSS
overflow utility classes consistent with established patterns in the codebase.

**Task 1: `components/chat-panel.tsx` (around line 295)**
- Locate the file name display `<span>` that currently uses `max-w-xs`
- Replace `max-w-xs` with a responsive, percentage-based constraint such as
`max-w-[60%]` or `max-w-[calc(100%-4rem)]` to accommodate the clear button at
all screen sizes
- Keep the existing `truncate` class intact for ellipsis behavior

**Task 2: `components/video-search-results.tsx` (around lines 121-123) and
`components/search-results-image.tsx` (around line 101)**
- Locate the `DialogDescription` elements that render raw query strings
- Add `truncate` or `line-clamp-2` to each `DialogDescription` to prevent
overflow on long queries
- Follow the existing `line-clamp-2` pattern already used on titles within these
same components for consistency

**Task 3: `components/calendar-notepad.tsx`**
- Locate the timestamp `<p>` element (around lines 157-158) and add the
`truncate` class
- Locate the note card container `<div>` (around line 154) and add
`overflow-hidden` to prevent wide unbreakable tokens from escaping despite
`break-words`
- Locate the outer card container `<div>` (around line 95) and add
`overflow-hidden` as a defensive measure
===============================================================================

Task: 2

Extend `tests/responsive.spec.ts` with new tests that validate the overflow
fixes from Phase 1 and guard against future regressions.

- Inside the existing "Small Mobile" (320px) `describe` block, add a new test to
verify that file attachment names in the chat panel do not overflow their
container
- Add a test to verify that `DialogDescription` elements in video and image
search results do not cause horizontal scroll when populated with long query
strings
- Use `data-testid` selectors to target elements, `boundingBox()` for width
assertions, and `document.body.scrollWidth` checks consistent with existing test
patterns
- Wrap assertions for conditionally-rendered elements with `if (await
element.isVisible())` guards to avoid false failures when those elements are not
present

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!