Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

UI text overflow

Aperta
  • Qualcosa non va?
#567 8 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
css, nextjs, react, tailwindcss, typescript
Ambito
frontend, testing-qa

Direzione di ricerca

Leggi app/globals.css e i file dei componenti referenziati per identificare quale comportamento di overflow richiede di modificare l’issue. Esegui tests/responsive.spec.ts nel viewport da 320px e usa la sua asserzione esistente sulla larghezza come verifica del completamento, una volta chiarita la modifica UI desiderata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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:

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);
    }
  });
Lingua principale
TypeScript
Stelle
19
Fork
7
Merge medio
55m
PR unite (30g)
19

Preparare l'ambiente

  • Include un Dockerfile o un file Docker Compose
  • Nessun modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di QueueLab/QCX

Tutte le issue di QueueLab/QCX

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.