From 724ab0e2906a31273914384cc39d0d8b91f74a67 Mon Sep 17 00:00:00 2001 From: David Wertheimer Date: Sat, 3 Jan 2026 11:21:35 -0800 Subject: [PATCH] Fix SettingsDialog vertical centering --- helpers/react/DynamicDialog/DynamicDialog.css | 6 ++---- jgclark.Dashboard/CHANGELOG.md | 3 +++ jgclark.Dashboard/plugin.json | 2 +- jgclark.Dashboard/src/react/css/SettingsDialog.css | 7 +++---- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/helpers/react/DynamicDialog/DynamicDialog.css b/helpers/react/DynamicDialog/DynamicDialog.css index 405f0ae4e..34cdc7afc 100644 --- a/helpers/react/DynamicDialog/DynamicDialog.css +++ b/helpers/react/DynamicDialog/DynamicDialog.css @@ -7,16 +7,14 @@ /* background-color: var(--bg-main-color); */ background-color: var(--bg-mid-color); position: fixed; - top: calc(50% + var(--noteplan-toolbar-height, 0)/2); /* TEST: */ + top: 50vh; /* Center in viewport */ height: 90vh; max-height: calc(92vh - var(--noteplan-toolbar-height, 0)); - /* max-height: calc(92% - var(--noteplan-toolbar-height, 0)); TEST: */ left: 50%; /* width: 90vw; */ /* max-width: 90vw; */ width: clamp(380px, 86%, 700px); - /* transform: translate(-50%, -50%); */ - transform: translate(-50%, 0%); /* TEST: */ + transform: translate(-50%, -50%); /* Center both horizontally and vertically */ border: none; box-shadow: 0 8px 16px rgba(0 0 0 / 0.2); /* z-index: 1000; */ diff --git a/jgclark.Dashboard/CHANGELOG.md b/jgclark.Dashboard/CHANGELOG.md index 1ff6e72c4..a2cd6f693 100644 --- a/jgclark.Dashboard/CHANGELOG.md +++ b/jgclark.Dashboard/CHANGELOG.md @@ -9,6 +9,9 @@ For more details see the [plugin's documentation](https://github.com/NotePlan/pl - TODO: fix isNoteFromAllowedFolder() for teamspace or possibly 2025-W21.md --> +## [2.4.0.b7] 2026-01-03 +- Fixed Settings Dialog and DynamicDialog positioning to center properly in viewport when `--noteplan-toolbar-height` is set. Changed from using percentage-based positioning (which used full page height) to viewport-based units (vh) for proper centering. + ## [2.4.0.b5] 2026-01-03 - Fixed height/Y pos issues for Dynamic and Settings dialogs - dev: added new color definitions to theme CSS generator diff --git a/jgclark.Dashboard/plugin.json b/jgclark.Dashboard/plugin.json index 80c37c1c2..03aa30fbd 100644 --- a/jgclark.Dashboard/plugin.json +++ b/jgclark.Dashboard/plugin.json @@ -6,7 +6,7 @@ "plugin.description": "A Dashboard for NotePlan, that in one place shows\n- a compact list of open tasks and checklists from today's note\n- scheduled open tasks and checklists from other notes.\n- Similarly for yesterday's note, tomorrow's note, and the weekly, monthly and quarterly notes too (if used)\n- all overdue tasks\n- all open tasks and checklists that contain particular @tags or #mentions of your choosing\n- the next notes ready to review (if you use the 'Projects and Reviews' plugin).", "plugin.author": "@jgclark", "plugin.version": "2.4.0", - "plugin.releaseStatus": "b5", + "plugin.releaseStatus": "b7", "plugin.hidden": false, "plugin.lastUpdateInfo": "2.4.0: new 'Spaces to Include' setting which controls which (Team)Spaces you wish to include, plus whether or not to include the Private 'Space' (all notes not in a Space)\n2.3.3: new 'Year' section available.\n2.3.2: fix display when there are no priority items shown.\n2.3.1: fix for possible loss of settings error when upgrading.\n2.3.0: Support for NotePlan (Team)Spaces. Can re-order display of Sections.New '/backupSettings' command. Added 'noteTags' feature. Speeded up Tag/Mention sections. Layout improvements. Lots of other small fixes and improvements.\n2.2.1: Add new sorting option for Tag and Overdue sections.\n2.2.0: Add 'Search' section. New keyboard shortcuts. Plus many small improvements, bug fixes and performance improvements. See documentation for details.\n2.1.10: More move-under-heading options. Bug fixes and performance improvements.\n2.1.9: performance improvements and better UI for iPhone users.\n2.1.8: various fixes and small improvements.\n2.1.7: various fixes and small improvements.\n2.1.6: allow all current timeblocks to be shown, not just the first. Add new @repeat()s if using the extended syntax from the Repeat Extensions plugin. Bug fixes.\n2.1.5: fixes to time blocks and scheduling items.\n2.1.4: fix to Interactive Processing, and Edit All Perspectives dialog now shows unsaved changes.", "plugin.dependencies": [], diff --git a/jgclark.Dashboard/src/react/css/SettingsDialog.css b/jgclark.Dashboard/src/react/css/SettingsDialog.css index 75eae6d71..37048c5aa 100644 --- a/jgclark.Dashboard/src/react/css/SettingsDialog.css +++ b/jgclark.Dashboard/src/react/css/SettingsDialog.css @@ -6,12 +6,11 @@ font-family: system-ui; background-color: var(--bg-mid-color); position: fixed; - top: calc(50% + var(--noteplan-toolbar-height, 0)*2); /* a little lower to try to avoid hiding the Header bar, as we want to see Perspective name */ - max-height: calc(90% - var(--noteplan-toolbar-height, 0)*); + top: 50vh; /* Center in viewport */ + max-height: calc(90vh - var(--noteplan-toolbar-height, 0)); left: 50%; width: clamp(380px, 86%, 700px); - /* transform: translate(-50%, -48%); /* second param needs to be a little lower than 50% to avoid hiding the Header bar, as we want to see Perspective name */ - transform: translate(-50%, 0%); /* TEST: */ + transform: translate(-50%, -50%); /* Center both horizontally and vertically */ border: none; box-shadow: 0 8px 16px rgba(0 0 0 / 0.2); /* z-index: 1000; */