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

fix(ui): contener las capas de los popups dentro de sus esquinas

Abierto
  • ¿Algo no está bien?
#95 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@egdev6 ya está trabajando en esto.

Desde el 12/10/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

status:approved type:bug
Pre-flight checks
  • I searched existing issues and found no duplicate.
  • I understand that this report enters review before implementation.

El asistente completó la búsqueda de issues abiertas/cerradas y contrastó el inventario y antecedentes. El mantenedor confirmó la revisión previa y aprobó la publicación de quorb-ui-ux-v1. Esto no asigna trabajo ni inicia implementación.

What happened?

El mantenedor reporta que las capas superiores de los popups de detalle sobresalen del contorno redondeado. La captura aportada muestra bandas/fondo rectangulares en ambas esquinas superiores del panel Claude.

La inspección de main 3da13d206418d6f9a91647f0a4ce127b3ed5364c identifica un conflicto coherente con el reporte: DetailPanel.tsx aplica overflow: visible inline y el tema tiene bandas sin radio y radios de distintas capas. Es evidencia estática, no reproducción del artefacto ni prueba de causa única.

Steps to reproduce
  1. Ejecutar Quorb en modo desarrollo sobre la rama main, como en el entorno reportado.
  2. Abrir un popup de detalle desde la tira; el ejemplo aportado es Claude.
  3. Observar las esquinas superiores y comparar el contorno exterior con las capas del encabezado/fondo.
  4. Registrar el caso mínimo en el entorno real antes de corregir; extender la comprobación a los demás paneles que compartan la estructura.

Estos pasos describen el escenario reportado; el asistente no los ha ejecutado.

Expected behavior

Encabezado y fondos respetan las esquinas y el contorno del popup.

Alcance y criterios de aceptación
  • Reproducir y registrar el artefacto en el entorno dev de escritorio, identificando las capas involucradas.
  • Unificar el contorno/radio de las capas afectadas y evitar fondos que sobresalgan en las esquinas.
  • No cortar contenido, iconos, acciones, indicadores de foco ni sombras exteriores intencionadas al introducir clipping.
  • Conservar el ajuste de altura sin scroll y la medición/geometría integrados en #70 / PR #71.
  • Validar paneles de varios proveedores y tamaños/escalados pertinentes; evidencia visual antes/después.
  • Checks focales y regresión visual con estilos reales; ejecución desktop final explícita, sin afirmar reproducción Windows desde Chromium.
Orientación y antecedentes

Entradas: src/DetailPanel.tsx, estructura de tarjetas/paneles, src/theme.css y src/styles.css. Referencia técnica: DetailPanel en main inspeccionado. No imponer overflow: hidden global sin validar medición, foco y sombras.

La búsqueda identifica #70 como antecedente de altura, no duplicado del clipping de esquinas. No reabrir ni cambiar #70. La unidad de paleta comparte theme.css: coordinar entregas sin dependencia funcional artificial.

Coordinación, validación y límites

Parte de la propuesta aprobada quorb-ui-ux-v1, milestone «Coherencia visual y personalización». Trabajo por el flujo habitual; no se incorpora automáticamente a ODD ni altera prioridades de #45. Sin assignee ni nueva etiqueta status:approved. Antes de empezar revisar responsables, comentarios y PR, y coordinar las superficies compartidas.

Tests y documentación con cada unidad. Checks de implementación previstos, no ejecutados durante planificación: npm test, npm run typecheck, npm run build y cargo test en src-tauri cuando cambie comportamiento Rust; además prueba real de escritorio en modo desarrollo. No acreditar comportamiento Windows/WebView2 desde tests de lógica o fixtures de navegador. No se publica una versión ni se modifica el código al crear esta issue.

No editar directamente el DS vendorizado src/ds/egdev/* (ver su README); usar extensión de la app o coordinar el cambio upstream. Sin rediseño general, migración de cuentas, cambios de credenciales, firma, releases o nuevas versiones prometidas.

Environment
Quorb: modo desarrollo, rama main (reportado por el mantenedor).
SO y versión exactos: no facilitados.
SHA exacto del checkout del usuario: no facilitado.
Referencia inspeccionada por el asistente: main 3da13d206418d6f9a91647f0a4ce127b3ed5364c, versión 0.6.0.
Evidencia: captura del popup Claude; sin reproducción ejecutada por el asistente.
Affected area

Application behavior

Agent or client (for MCP or headless incidents)

No response

Shell (for MCP or headless incidents)

No response

Lenguaje dominante
TypeScript
Estrellas
10
Forks
2
Merge medio
16 min
PR fusionados (30 d)
51

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

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 egdev6/quorb

Todos los issues de egdev6/quorb

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.