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

Aperta
  • Qualcosa non va?
#228 3 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@matraket ci sta già lavorando.

Dal 1/11/2026.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
30/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
rust, typescript
Ambito
desktop, frontend

Direzione di ricerca

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.

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

Descrizione

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

Lingua principale
TypeScript
Stelle
10
Fork
2
Merge medio
4h 57m
PR unite (30g)
121

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

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

Tutte le issue di egdev6/quorb

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.