+
+
+
+
+
+ {selected && (
+
+ - Resolution
+ - {selected.width} × {selected.height} px
+
+ - Scale
+ - {Math.round(selected.scaleFactor * 100)}%
+
+ {selected.displayFrequency > 0 && (
+ <>
+ - Refresh rate
+ - {selected.displayFrequency} Hz
+ >
+ )}
+
+ - Position
+ - {selected.x}, {selected.y}
+
+ - Primary
+ - {selected.isPrimary ? 'Yes' : 'No'}
+
+ )}
+
+ );
+};
+
+export default DisplaySettings;
diff --git a/src/renderer/app/styles/settings-page.ts b/src/renderer/app/styles/settings-page.ts
index 4f69086..41b4765 100644
--- a/src/renderer/app/styles/settings-page.ts
+++ b/src/renderer/app/styles/settings-page.ts
@@ -98,10 +98,36 @@ const settingsPageStyles = `
}
}
- .overlay-settings, .hotkeys-settings {
+ .overlay-settings, .hotkeys-settings, .display-settings {
padding: var(--space-600);
}
+ .display-settings {
+ select {
+ min-width: 320px;
+ }
+
+ .display-info-grid {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ gap: 6px 24px;
+ margin: 16px 0 0;
+ padding: 16px;
+ background-color: var(--color-surface-primary);
+ border-radius: 4px;
+
+ dt {
+ color: var(--color-text-tertiary);
+ font-size: var(--font-size-350);
+ }
+
+ dd {
+ font-size: var(--font-size-350);
+ margin: 0;
+ }
+ }
+ }
+
.settings-title {
font-size: var(--font-size-400);
line-height: var(--font-line-height-600);