Mobile UI Improvements

Author: 0xGingi

src/components/MobileNav.tsx

@@ -315,7 +315,7 @@ export function MobileNav({
         </Group>
 
         <Group justify="center" p="xs" pb="md">
-          <Text size="xs" c="dimmed">© 2023 Toolworks</Text>
+          <Text size="xs" c="dimmed">© 2025 Toolworks.dev</Text>
           <Anchor 
             href="https://github.com/toolworks-dev/trusty-notes" 
             target="_blank" 

src/components/NoteEditor.tsx

@@ -34,7 +34,6 @@ export function NoteEditor({ note, isMobile = false, isKeyboardVisible = false,
     setContent(note.content || '');
   }, [note]);
 
-  // Initialize crypto if needed
   useEffect(() => {
     const initCrypto = async () => {
       try {
@@ -50,13 +49,9 @@ export function NoteEditor({ note, isMobile = false, isKeyboardVisible = false,
     initCrypto();
   }, []);
 
-  // Update the useEffect that handles body overflow
   useEffect(() => {
     if (isMobile) {
-      // Prevent body scrolling when editor is open on mobile
       document.body.style.overflow = 'hidden';
-      
-      // Add a class to help with mobile styling
       document.body.classList.add('editor-open');
 
       return () => {
@@ -161,11 +156,12 @@ export function NoteEditor({ note, isMobile = false, isKeyboardVisible = false,
 
           <Box className="editor-container" style={{ 
             flex: 1,
-            border: '1px solid var(--mantine-color-gray-3)', 
-            borderRadius: '8px',
             overflow: 'hidden',
             backgroundColor: 'var(--mantine-color-body)',
-            position: 'relative'
+            position: 'relative',
+            display: 'flex', 
+            flexDirection: 'column',
+            paddingBottom: '70px'
           }}>
             <MarkdownEditor
               content={content}
@@ -256,17 +252,19 @@ export function NoteEditor({ note, isMobile = false, isKeyboardVisible = false,
           </Box>
         </>
       )}
-      <Paper withBorder radius="md" p="md" mb="md">
-        <Group justify="space-between">
-          <Stack gap={4}>
-            <Text size="sm" fw={500}>Last edited: {format(note.updated_at, 'MMM d, yyyy h:mm a')}</Text>
-            {getEncryptionBadge()}
-          </Stack>
-          <ActionIcon color="red" onClick={handleDelete}>
-            <IconTrash size={18} />
-          </ActionIcon>
-        </Group>
-      </Paper>
+      {!isMobile && (
+        <Paper withBorder radius="md" p="md" mb="md">
+          <Group justify="space-between">
+            <Stack gap={4}>
+              <Text size="sm" fw={500}>Last edited: {format(note.updated_at, 'MMM d, yyyy h:mm a')}</Text>
+              {getEncryptionBadge()}
+            </Stack>
+            <ActionIcon color="red" onClick={handleDelete}>
+              <IconTrash size={18} />
+            </ActionIcon>
+          </Group>
+        </Paper>
+      )}
     </Box>
   );
 } 

src/components/RichTextEditor.tsx

@@ -25,7 +25,7 @@ import {
   IconH1,
   IconH2,
 } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, CSSProperties } from 'react';
 
 const tableStyles = {
   '.ProseMirror': {
@@ -272,6 +272,23 @@ export function RichTextEditor({ content, onChange, isMobile }: RichTextEditorPr
     </Box>
   );
 
+  const mobileBorderStyle: CSSProperties = isMobile ? {
+    borderLeft: '1px solid var(--mantine-color-gray-3)',
+    borderRight: '1px solid var(--mantine-color-gray-3)',
+    borderBottom: '1px solid var(--mantine-color-gray-3)',
+    borderTop: 'none',
+    borderRadius: '8px',
+    padding: '1rem',
+    overflow: 'hidden',
+    flex: 1
+  } : { 
+    border: '1px solid var(--mantine-color-gray-3)', 
+    borderRadius: 'var(--mantine-radius-md)', 
+    padding: '1rem',
+    overflow: 'hidden',
+    flex: 1 
+  };
+
   return (
     <Box style={{ 
       display: 'flex', 
@@ -332,12 +349,9 @@ export function RichTextEditor({ content, onChange, isMobile }: RichTextEditorPr
           flex: '1 1 auto',
           display: 'flex',
           flexDirection: 'column',
-          border: '1px solid var(--mantine-color-gray-3)',
-          borderRadius: 'var(--mantine-radius-md)',
-          padding: '1rem',
-          overflow: 'hidden',
           minHeight: 0,
           ...tableStyles,
+          ...mobileBorderStyle
         }}
       >
         <EditorContent