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

[UI] Search bar is clipped on mobile viewports on the Kanvas documentation page

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,366 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@Yashisinghal285 ya está trabajando en esto.

Desde el 30/10/2026.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
74/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, javascript
Área
documentation, frontend

Línea de trabajo

Abre https://docs.layer5.io/kanvas/ con un viewport de 414px e inspecciona la barra de búsqueda situada debajo del encabezado de navegación. Céntrate en sus restricciones de ancho, el tamaño del elemento padre y el CSS responsive. Identifica en la página la hoja de estilos o el componente pertinente y reproduce el recorte en el modo responsive de Firefox. La tarea estará terminada cuando la barra de búsqueda quepa en el viewport sin desbordamiento horizontal, tanto en anchos móviles como de escritorio.

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

Descripción

framework/hugo help wanted kind/bug language/css language/javascript

Description

The search bar on the Kanvas documentation website appears clipped on mobile viewports. The search input does not fit correctly within the available content area, resulting in a broken responsive layout.

Affected page: https://docs.layer5.io/kanvas/

Steps to Reproduce
  1. Open https://docs.layer5.io/kanvas/.
  2. Open browser Developer Tools and enable Responsive Design Mode.
  3. Set the viewport width to approximately 414px.
  4. Observe the search bar below the navigation header.
Actual Behavior

The search input appears cut off on the right side instead of fitting within the available viewport width.

Expected Behavior

The search bar should adapt to the available screen width, remain fully visible, and maintain appropriate spacing from the surrounding elements across mobile and desktop viewports.

Environment
  • Page: Kanvas Documentation
  • Viewport: 414 × 846 pixels
  • Browser: Firefox
  • Issue type: UI / Responsive Design
Screenshot

The attached screenshot demonstrates the clipped search bar in mobile emulation.

Proposed Outcome

Investigate the search bar's width constraints, parent container sizing, and responsive CSS rules to ensure the search input fits within the available space on smaller screens without horizontal overflow.

I would Like to work on this...
Image
Lenguaje dominante
JavaScript
Estrellas
103
Forks
227
Merge medio
15 h 45 min
PR fusionados (30 d)
63

Preparar el entorno

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 layer5io/docs

Todos los issues de layer5io/docs

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.