bug(widget): la tira y el panel de detalle se cortan en Windows con el tamaño de texto por encima de 100 %

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

Los mantenedores suelen responder en 1 día

@matraket ya está trabajando en esto.

Desde el 1/11/2026.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
rust, typescript
Área
desktop, frontend

Línea de trabajo

The scale conversion lives in geoOf in src/Widget.tsx, physicalPanelBounds in src/lib/detail-panel.ts, the detail conversion in src/DetailPanel.tsx, and SetWindowPos handling in src-tauri/src/detail_geometry.rs. Start by reading how scaleFactor feeds those conversions, then check where devicePixelRatio differs from it. Done means the size conversion uses the window's real devicePixelRatio, with unit tests for the mismatch case. The issue still has open design questions, so confirm the approach with maintainers before writing code.

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

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.
What happened?

Qué pasa

En Windows, la tira y el panel de detalle de cada proveedor se ven cortados por el borde derecho, como si tuvieran un ancho fijo. En el panel quedan cortados los porcentajes, las barras y la esquina redondeada, que se ve como un borde recto. En la tira se corta el último anillo y los iconos de acciones.

Pasa desde la instalación. No es una regresión reciente.

Causa

La app pasa los tamaños de píxeles CSS a píxeles físicos usando el scaleFactor del monitor, que solo tiene en cuenta la escala de pantalla. WebView2, en cambio, pinta el contenido con devicePixelRatio, que combina la escala de pantalla y el tamaño de texto de Accesibilidad. Si el tamaño de texto es mayor que 100 %, cada ventana nativa queda más pequeña que su contenido en esa misma proporción.

En mi caso:

  • escala personalizada 102 %, así que scaleFactor = 1,02
  • tamaño de texto 106 %, así que devicePixelRatio ≈ 1,02 × 1,06 ≈ 1,081
  • la ventana queda un ~6 % más estrecha que su contenido, unos 20 px en un panel de ~330 px

Lo comprobé así: con el tamaño de texto al 100 % (y pulsando «Aplicar»), las dos superficies se ven bien.

Dónde ocurre:

  • src/Widget.tsx geoOf: sf = m.scaleFactor.
  • Tira: src/Widget.tsx mide la tira en CSS px (ResizeObserver) y la convierte con physicalPanelBounds(win, geo.sf) antes de set_widget_bounds.
  • Detalle: src/DetailPanel.tsx convierte con physicalPanelBounds(detailBounds(data, next), data.scaleFactor) antes de set_detail_bounds. El recorte de superficie también escala con data.scaleFactor.
  • src/lib/detail-panel.ts physicalPanelBounds: multiplica posición y tamaño por el mismo factor.
  • src-tauri/src/detail_geometry.rs: SetWindowPos aplica esos píxeles tal cual.

Contexto upstream: Tauri todavía no expone el factor de texto (tauri-apps/tauri#14711, tauri-apps/tao#1168 abierta). La documentación de WebView2 (ICoreWebView2Controller3::get_RasterizationScale) lo confirma: «The rasterization scale is the combination of the monitor DPI scale and text scaling set by the user».

Propuesta de solución

Separar las dos conversiones:

  1. Posiciones con scaleFactor, como ahora, porque el área de trabajo viene en unidades del monitor.
  2. Tamaños con el window.devicePixelRatio real de la ventana que contiene el contenido: el de la ventana del widget para la tira y el de la ventana de detalle para el panel. Lo mismo para la escala del recorte de superficie.
  3. Tests unitarios de la conversión con devicePixelRatio ≠ scaleFactor (por ejemplo 1,02 / 1,0812 y 1,25 / 1,5). Hoy ningún test cubre ese caso. Tests de no regresión para devicePixelRatio == scaleFactor (100 %, 125 %, 200 %), que debe dar el mismo resultado que ahora.
  4. Escuchar los cambios de devicePixelRatio (matchMedia('(resolution: …dppx)')) para recolocar si el usuario cambia el tamaño de texto con la app abierta.

Alternativa que descarto: pasar --force-text-scale-factor=1 a WebView2 en los argumentos del navegador. Haría que Quorb ignore el tamaño de texto del usuario, que es justo un ajuste de accesibilidad, y no he comprobado que funcione.

Preguntas para cerrar la spec:

  • ¿Os parece bien el enfoque de separar posiciones y tamaños, o preferís esperar a que Tauri exponga el factor de texto?
  • En Linux y macOS, devicePixelRatio y scaleFactor deberían coincidir, así que el cambio no tendría efecto. ¿Lo limitamos a Windows o lo dejamos general?
Steps to reproduce
  1. En Windows 11, ir a Configuración > Accesibilidad > Tamaño de texto, subirlo por encima de 100 % (por ejemplo 110 %) y pulsar «Aplicar».
  2. Abrir Quorb, o cerrarlo desde la bandeja y volver a abrirlo.
  3. Mirar la tira y abrir el panel de detalle de un proveedor.
Expected behavior

Que la tira y el panel se vean enteros, con el contenido y las esquinas redondeadas dentro de la ventana, sea cual sea el tamaño de texto de Windows.

Environment
Windows 11
Quorb: v0.8.0 (pasaba también en versiones anteriores, desde la instalación)
Escala de pantalla: personalizada 102 %
Tamaño de texto (Accesibilidad): 106 %
Reproducido con un monitor (en casa); en el trabajo uso 3 monitores, no medido con esta configuración
Affected area

Application behavior

Lenguaje dominante
TypeScript
Estrellas
10
Forks
2
Merge medio
4 h 57 min
PR fusionados (30 d)
121

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.