.page-header{margin-bottom:0}
.page-subheader{margin:0 0 24px;font-size:16px;line-height:1.5;font-weight:600;color:#0d1117}
.info-note{display:flex;align-items:flex-start;gap:16px;margin:0 0 32px;padding:16px 20px 16px 16px;background:#eff6ff;border:1px solid #3b82f6;border-left:4px solid #3b82f6;border-radius:6px}
.info-note__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;min-width:32px;height:32px;font-size:20px;line-height:1;margin:2px 0 0}
.info-note__content{flex:1;min-width:0}
.info-note__title{margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.4;color:#0d1117}
.info-note__body{margin:0;font-size:13px;line-height:1.8;color:#57606a}
.info-note__body p{margin:0}
.page-hero{margin:0 0 32px}
.page-hero img{display:block;width:100%;max-width:100%;height:auto;border-radius:6px;border:1px solid #e5e7eb}
.section-intro{font-size:14px;line-height:1.7;color:#374151;margin:0 0 16px}
.overview-principles{margin:16px 0 0;padding-left:20px;font-size:13px;line-height:1.8;color:#374151}
.overview-principles li{margin-bottom:4px}
.overview-principles__label{margin:20px 0 8px;font-size:13px;font-weight:700;line-height:1.55;color:#0d1117}
.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}

# Responsive design

Built to adapt to every workspace.
ℹ️
Ongoing exploration
This page is an active work in progress. We are still exploring responsive layout guidance for Petrel — additional examples, patterns, and implementation details are coming soon.
## Overview

In Petrel, responsive design means the interface adapts when users resize windows, open or dock panels, change screen resolution, or use display scaling. Content should resize, reflow, or prioritize itself without overlapping, clipping, or hiding important actions.
Responsive design for Petrel is less about mobile-style breakpoints and more about keeping complex desktop workflows usable as the available workspace changes.
Key principles:
Keep primary actions visible and accessible.
Allow panels and content areas to resize gracefully.
Define minimum sizes before content becomes unusable.
Reflow content instead of overlapping elements.
Use truncation only when necessary, with access to the full value.
Preserve hierarchy when space becomes limited.
Support common Windows display scaling and different monitor sizes.
Test layouts with docked panels, split views, and smaller Petrel windows.
### Related pages

Spacing
Scaling and DPI
Dialogs
— Dialog sizing guidance