various improvements

src/components/page.tsx

@@ -22,7 +22,7 @@ const Page = ({ children, noPadding, fullWidth, ...props }: PageProps) => {
       {...props}
     >
       {header.collapsed && header.withBackButton && (
-        <BackButton />
+        <BackButton top={4} />
       )}
       {header.collapsed && header.settingsLink && (
         <SettingsButton to={header.settingsLink} />

src/components/rich-text-editor.tsx

@@ -0,0 +1,40 @@
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { RichTextEditor as MantineRichTextEditor } from '@mantine/tiptap';
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function RichTextEditor({
+  value,
+  onChange,
+}: RichTextEditorProps) {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+  });
+
+  return (
+    <MantineRichTextEditor editor={editor}>
+      <MantineRichTextEditor.Toolbar>
+        <MantineRichTextEditor.ControlsGroup>
+          <MantineRichTextEditor.Bold />
+          <MantineRichTextEditor.Italic />
+        </MantineRichTextEditor.ControlsGroup>
+        <MantineRichTextEditor.ControlsGroup>
+          <MantineRichTextEditor.Blockquote />
+          <MantineRichTextEditor.Hr />
+          <MantineRichTextEditor.BulletList />
+          <MantineRichTextEditor.OrderedList />
+        </MantineRichTextEditor.ControlsGroup>
+      </MantineRichTextEditor.Toolbar>
+
+      <MantineRichTextEditor.Content />
+    </MantineRichTextEditor>
+  );
+}

src/components/swipeable-tabs.tsx

@@ -98,13 +98,11 @@ function SwipeableTabs({
     updateHeight();
   }, [activeTab, updateHeight]);
 
-  // Update height when content changes (after render)
   useEffect(() => {
     const timeoutId = setTimeout(updateHeight, 0);
     return () => clearTimeout(timeoutId);
   });
 
-  // Use ResizeObserver to watch for content size changes
   useEffect(() => {
     const activeSlideRef = slideRefs.current[activeTab];
     if (!activeSlideRef) return;
@@ -142,6 +140,7 @@ function SwipeableTabs({
         top={0}
         style={{
           display: "flex",
+          paddingInline: "var(--mantine-spacing-md)",
           marginBottom: "var(--mantine-spacing-md)",
           zIndex: 100,
           backgroundColor: "var(--mantine-color-body)",