fix: prevent color picker overflow on mobile

Constrain color picker popup width to viewport minus padding with a
max-width, preventing horizontal overflow on small screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/NoteEditor.svelte

@@ -139,7 +139,7 @@
 						<Palette class="h-5 w-5 text-[var(--text-muted)]" />
 					</button>
 					{#if showColorPicker}
-						<div class="absolute left-0 top-full mt-2 rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-2">
+						<div class="absolute left-0 top-full z-10 mt-2 w-[calc(100vw-4rem)] max-w-xs rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-2">
 							<ColorPicker selected={color} onSelect={handleColorSelect} />
 						</div>
 					{/if}

todo.md

@@ -4,7 +4,7 @@
 - [x] make sure we use only lucid icons everywhere
 - [x] on mobile the header is clutered, maybe we can colapse the search bar into a search icon, and when clicked it opens a search bar to search
 - [x] let's add an outline on the colour palette selection for the background to make each colour more visible
-- [ ] on mobile the colour selection overflows outside the screen
+- [x] on mobile the colour selection overflows outside the screen
 - [ ] let's use another icon for toggling the raw md mode, also the active state doesn't make on this icon now, either we change the icon when it's in one state or the other, or the button should be active when the md state is active
 - [ ] same for the list icon, toggling between this mode is nice but the icon becomes inactive which is weird
 - [ ] on mobile the toolbar collapose on two lines, can we do something so it stays only on one line and we have a dropdown to open the additional options