fix: Spaces panel overlapping safe area on mobile devices #532
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes issue where editing options in table properties would not save correctly. Changes: - Fix PropertyValue.tsx: Save options and colorScheme atomically to prevent data loss - Fix EditOptionsModal.tsx: Auto-close color picker menu after color selection - Fix OptionCell.tsx: Prioritize individual option colors over color scheme - Fix package.json: Correct typo in dev script (nnode -> node) - Update tsconfig.json: Change target from es6 to es2020 to support regex dotall flag - Update .gitignore: Add data.json to ignore user settings The main issue was that calling saveParsedValue twice would overwrite the first save with stale data. Now both fields are saved in a single atomic operation.
Fixed issue where checkbox properties in the top section (inline properties) were not updating when changed in the bottom Properties section. Root cause: PropertiesView component was only listening to 'contextStateUpdated' events, which are not triggered when individual file properties are saved via saveProperties(). When a checkbox is toggled, it saves via saveProperties() which triggers 'pathStateUpdated' event instead. Solution: Added listener for 'pathStateUpdated' event to refresh property values when the current path's properties change. This ensures both property sections stay in sync. Changes: - Added pathChanged() handler to listen for pathStateUpdated events - Added pathState to useEffect dependencies for proper cleanup - Properties now refresh immediately when any property is saved
**Bug Description:** When adding or modifying select (option) property values in the Properties panel, the values were being incorrectly serialized as JSON arrays (e.g., ["approve"]) instead of plain strings (e.g., "approve"). This caused the values to display with quotes in the UI and broke the select dropdown functionality. **Root Causes:** 1. OptionCell was using serializeMultiDisplayString() for single select values, which was unnecessary and caused incorrect serialization 2. parseProperty() was called without explicit type information, causing detectPropertyType() to misidentify single option arrays as option-multi 3. No safeguards existed to handle array values when parsing single options **Changes Made:** 1. **OptionCell.tsx**: Changed single option value serialization from serializeMultiDisplayString() to direct value access (value[0] ?? "") in savePropValue() and removeOption() methods 2. **PropertiesView.tsx**: Modified property parsing to pass explicit column type to parseProperty(), preventing type misdetection 3. **parsers.ts**: Added array handling in parseProperty() for option type to extract first element if value is unexpectedly an array 4. **properties.ts**: Added safety check in parseMDBStringValue() to parse and extract single values from JSON array strings when saving to frontmatter **Testing:** - Single select options now save and display correctly without quotes - Multi-select options continue to work as expected - Select dropdowns function properly after value changes
…e misdetection
**Bug Description:**
When property values were parsed from frontmatter in PropertiesView and
syncContextRow, the type parameter was not passed to parseProperty(). This
caused detectPropertyType() to auto-detect types based on the value format
rather than using the actual field schema definition.
For example, a single-select option field with an array value like ["approve"]
in frontmatter would be misdetected as option-multi instead of option, causing:
1. Values to display incorrectly with quotes
2. Checkbox properties not syncing between top and bottom views
**Root Cause:**
Two locations were calling parseProperty() without the type parameter:
1. PropertiesView.tsx line 100 - when loading properties from frontmatter
2. linkContextRow.ts line 94 - when syncing context rows with frontmatter
This caused the system to rely on detectPropertyType() which makes assumptions
based on value format (arrays → multi-type) rather than using the actual
schema definition.
**Changes Made:**
1. **PropertiesView.tsx** (line 87-95):
- Added lookup in both tableData.cols AND columns (from context schemas)
- This ensures properties defined in context schemas are found correctly
- Pass the resolved field type to parseProperty() on line 100
2. **linkContextRow.ts** (line 92-96):
- Modified filteredFrontmatter reduce function to find field type from
fields array before calling parseProperty()
- Pass the field type as third parameter to parseProperty()
**Impact:**
- Single-select options now parse correctly even when stored as arrays
- Boolean checkboxes sync properly between top properties and bottom panel
- Multi-select options continue to work as expected
- Type detection now respects schema definitions over value format
**Testing:**
- ✅ Single select with array value displays without quotes
- ✅ Boolean checkboxes sync between top and bottom views
- ✅ Multi-select options work correctly
- ✅ Properties from context schemas resolve proper types
…ntmatter Fix: Select option values displaying with quotes and checkbox sync issues
…+ dry-run apply/undo Problem: - Make.md stores space metadata/config under a dedicated folder (default: .space). - Obsidian Sync has a known limitation: hidden (dot-prefixed) folders may not sync reliably. - Users rename the folder to a non-hidden name (e.g. _space, __space__, new_space) so Sync can include it. - But once the folder is not hidden, it becomes visible in File Explorer, appears in Graph, and is considered during indexing/search unless users manually configure exclusions in multiple places. Goal: When the Make.md space config folder name is changed to a non-hidden folder, provide a way to automatically exclude it from: - File tree visibility (UI) - Graph visibility - Indexing/search visibility …without requiring manual Obsidian global configuration each time. Solution overview: This PR adds two ways to apply "space folder hiding" after renaming the folder: 1) Automatic mode (OFF by default) - New setting: "Auto-apply space folder hiding" (autoApplySpaceFolderHiding) - When enabled, changing "Space Folder Name" automatically: - Updates .obsidian/app.json → userIgnoreFilters with pattern **/<spaceFolderName>/** - Writes/enables .obsidian/snippets/makemd-hide-space-folders.css via .obsidian/appearance.json - Reindexes Make.md paths/spaces 2) Manual mode (recommended default) via Dry-run popup - New button: "Reapply space folder hiding" (placed right after "Space Folder Name") - Opens a popup that shows a human-readable Dry-run of changes: - what will be added/removed in userIgnoreFilters - which CSS snippet will be written/enabled - that Make.md will reindex - Buttons: - Apply: performs changes + reindex - Undo: removes the ignore filter, disables & deletes the snippet, then reindexes Implementation details: - Extend Make.md internal path filtering so the configured space folder name is treated as hidden even when it is not dot-prefixed: - hide the folder itself and all nested files (matches any path segment equal to spaceSubFolder) - Fix Space node visibility in Make.md: - previously, hidden for type: 'space' nodes was effectively hardcoded to false - now hidden is derived from the same exclusion predicate used for paths - Add UI both in: - Obsidian Settings → Make.md → Advanced - Make.md internal Settings UI → Advanced Behavior before: - .space could be hidden, but Obsidian Sync may not sync it reliably. - Renaming to a non-hidden folder allowed sync, but the folder became visible everywhere and required manual exclusions. Behavior after: - Users can safely rename the space config folder to a non-hidden name for Sync compatibility. - They can then: - enable Auto-apply (optional), or - use the Manual Dry-run popup to apply/revert changes safely …to keep the folder out of the file tree, graph, and indexing. Constraints / limitations: - This does not change Obsidian Sync behavior; it only provides a workflow compatible with its limitations. - Undo reverts config/snippet changes; it does not rename/delete any user folders. - Some Obsidian UI effects may require a reload depending on Obsidian's config reload behavior.
- Fix Spaces header overlapping with system status bar on iPhone - Add env(safe-area-inset-top) padding for mobile workspace drawer header - Fixes issue where Spaces bar was hidden under notch/Dynamic Island
- Change from env(safe-area-inset-top, 0) to calc(env(safe-area-inset-top, 0px) + 12px) - Apply to both workspace-drawer-header and mk-focuses - Ensures Spaces header is fully visible below notch/Dynamic Island
- Apply env(safe-area-inset-top) directly to workspace-drawer-inner container - This ensures the entire Spaces panel starts below the notch/Dynamic Island - Previous fix only affected the header, not the content area
This reverts commit daf9158.
Problem: On mobile devices with notch/Dynamic Island, the Spaces panel with circular icons was overlapping the system status bar area, making the icons invisible. Solution: 1. Focuses.css: - Changed padding-top from 16px to 12px for better balance - Set top: 0 for nav-header (instead of safe-area-inset-top) - Added background-color and z-index for proper sticky positioning - Added padding-bottom: 8px for visual balance 2. FileTree.css: - Added rule for .is-mobile (not only is-phone) - Now workspace-drawer-inner has padding-top on all mobile devices Logic: Parent container (workspace-drawer-inner) has safe-area padding, and Spaces panel sticks to the top of container (top: 0), automatically accounting for safe-area. Additional padding inside mk-focuses provides visual comfort. Tested on Pixel 7 Pro emulator (Android).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
On mobile devices with notch or Dynamic Island (e.g., Pixel 7 Pro, Samsung Galaxy S24 Ultra, iPhone 14 Pro), the Spaces panel with circular icons was overlapping the system status bar, making the icons invisible to users.
Screenshots
Before:
The Spaces icons were hidden under the status bar/notch area.
After:
The Spaces icons are now properly visible with appropriate safe-area padding.
Root Cause
The issue occurred because:
.mk-focusespanel was usingpadding-topwith safe-area offsetnav-headerhadtop: safe-area-inset-topfor sticky positioning.is-phone, missing other mobile devicesSolution
Changes Made
1.
src/css/Panels/Navigator/Focuses.css16pxto12pxfor better balancetop: 0fornav-header(relies on parent container padding instead)background-colorandz-indexfor proper sticky positioningpadding-bottom: 8pxfor visual balance2.
src/css/Panels/Navigator/FileTree.css.is-mobile(not only.is-phone)workspace-drawer-innerhas safe-area padding on all mobile devices3.
styles.cssLogic
The fix follows this approach:
workspace-drawer-inner) gets safe-area paddingtop: 0mk-focusesprovides visual comfortTesting
✅ Tested on Pixel 7 Pro emulator (Android)
✅ Icons are visible and properly positioned
✅ No overlap with system status bar
✅ Proper spacing maintained
Test Checklist
Related Issues
This fix addresses the mobile safe-area overlap issue that has been affecting users on modern mobile devices with notches and Dynamic Island.
Version
Reverted version from
1.3.3-beta.4to1.3.3as requested.