.callout{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.6}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:4px 0 0}
.callout-placeholder{background:#F9FAFB;border:1px dashed #D1D5DB;border-left:4px solid #9CA3AF}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.prototype-note{font-size:12px;font-style:italic;color:#6B7280;border-left:2px solid #D1D5DB;padding-left:10px;margin:6px 0 12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Scaling and DPI

Petrel must remain fully usable at Windows display scaling settings of 125%, 150%, and 200%. Display scaling at 150% and above is the most-reported client issue in Delfi cloud environments.
## Purpose

Users on 4K monitors, high-resolution laptops, and Delfi cloud virtual desktops often run Windows at 150% or higher display scaling. If Petrel is not DPI-aware, it renders at the base resolution and Windows upscales it, producing blurry text and controls that are difficult to read and use.

## Who uses this guidance

Developers implementing WPF windows and controls, designers specifying layout dimensions, and QA engineers testing at multiple scaling levels.

## Core requirements

- All Petrel applications must declare Per-Monitor DPI awareness (PMv2) in the application manifest.
- Layouts must use device-independent units (DIPs), not physical pixels.
- Icons must be provided as vector graphics or in multiple bitmap resolutions (100%, 125%, 150%, 200%).
- No fixed pixel sizes in layouts that would cause controls to be clipped or overlapping at higher DPI.
- Test at minimum 100%, 125%, 150%, and 200% scaling before releasing any UI change.


## Common DPI problems in Petrel

Problem
Root cause
Required fix
Blurry text and controls
Application not DPI-aware; Windows upscaling
Declare PMv2 DPI awareness
Dialog clipping at 150%
Fixed-height Window or Grid row
Use Auto or Star sizing for rows
Bitmap icon blurring
Single-resolution bitmap scaled up
Provide multi-resolution icon set
Tooltip text overflow
Fixed-width tooltip container
Allow tooltip to size to content
Prototype value. Confirm specific scaling thresholds and accepted workarounds with the Petrel development team.
## Do and Don't

DO
Test every new dialog and pane at 150% scaling before code review. Use the Windows display settings to change scaling on your development machine — don't assume 100% covers all user scenarios.
DON'T
Don't set hard-coded pixel heights on Grid rows, StackPanel items, or Window MinHeight/MaxHeight without accounting for DPI scaling. These are the most common causes of clipped dialogs at 150%.
## Petrel example

Petrel example placeholder
Side-by-side screenshots of a Petrel dialog at 100% and 150% scaling — compliant and non-compliant versions — will be added here.
### Related pages

Responsive design
— Layout guidelines for different screen sizes
Spacing
— DIP-based spacing tokens
Icons
— Multi-resolution icon requirements