UI text overflow

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);
    }
  });

Read app/globals.css and the referenced component files to identify which overflow behavior the issue is asking to change. Run tests/responsive.spec.ts at the 320px viewport and use its existing width assertion as the completion check, once the desired UI change is clarified.