style(app): mobile-native layout with safe areas and grouped list

src/components/NoteEditor.tsx

@@ -17,7 +17,7 @@ function NoteForm({
 }: NoteFormProps) {
   return (
     <form
-      className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
+      className="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm"
       onSubmit={(event) => {
         event.preventDefault()
         onSubmit()
@@ -114,7 +114,7 @@ function NoteEditor(props: NoteEditorProps) {
 
   const { note } = props
   return (
-    <article className="flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+    <article className="flex flex-col gap-5 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
       <div className="flex items-start justify-between gap-4">
         <h2 className="text-xl font-semibold leading-snug">{note.title || 'Sans titre'}</h2>
         <button