Fix SettingsDialog vertical centering

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; */

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.b6] 2026-01-03
 - Fixed height/Y pos issues for Dynamic and Settings dialogs
 - dev: added new color definitions to theme CSS generator

jgclark.Dashboard/plugin.json

@@ -5,7 +5,7 @@
   "plugin.name": "🎛 Dashboard",
   "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.b6",
+  "plugin.version": "2.4.0.b7",
   "plugin.releaseStatus": "beta",
   "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.",

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; */