Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

UI text overflow

Abierto
  • ¿Algo no está bien?
#567 8 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
css, nextjs, react, tailwindcss, typescript
Área
frontend, testing-qa

Línea de trabajo

Lee app/globals.css y los archivos de componentes referenciados para identificar qué comportamiento de overflow solicita cambiar el issue. Ejecuta tests/responsive.spec.ts en el viewport de 320px y usa su aserción de ancho existente como comprobación de finalización, una vez aclarado el cambio de UI deseado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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);
    }
  });
Lenguaje dominante
TypeScript
Estrellas
19
Forks
7
Merge medio
24 min
PR fusionados (30 d)
9

Preparar el entorno

  • Incluye un Dockerfile o un archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de QueueLab/QCX

Todos los issues de QueueLab/QCX

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.