Have demo video

frontend/src/components/common/tiptap-customized.tsx

@@ -3,6 +3,7 @@ import { useEditor, EditorContent } from '@tiptap/react'
 import { FloatingMenu, BubbleMenu } from '@tiptap/react/menus'
 import { BatteryFull, List } from 'lucide-react'
 import TiptapToolbar from '@/components/common/tiptap-toolbar'
+import { useState, useEffect, useRef } from 'react'
 
 
 interface Props {
@@ -12,30 +13,77 @@ interface Props {
 
 const Tiptap = (props: Props) => {
   const { value, onValueUpdate } = props
+  const [isFocused, setIsFocused] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
   const editor = useEditor({
     extensions: [StarterKit], // define your extension array
     content: value,
     onUpdate: (updates) => {
       const { editor: newEditor } = updates
       const html = newEditor.getHTML()
       onValueUpdate(html)
+    },
+    onFocus: () => {
+      setIsFocused(true)
+    },
+    onBlur: () => {
+      // Delay to allow toolbar clicks
+      setTimeout(() => setIsFocused(false), 200)
     }
   })
 
+  // Detect mobile and keyboard
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
+    }
+
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+
+    // Use visualViewport API to detect keyboard
+    let viewport = window.visualViewport
+    if (viewport) {
+      const handleViewportChange = () => {
+        if (isMobile && viewport) {
+          // Keyboard is open when viewport height is significantly less than window height
+          const keyboardOpen = viewport.height < window.innerHeight * 0.75
+          // This will be handled by CSS using env(keyboard-inset-height)
+        }
+      }
+      viewport.addEventListener('resize', handleViewportChange)
+      return () => {
+        window.removeEventListener('resize', checkMobile)
+        viewport?.removeEventListener('resize', handleViewportChange)
+      }
+    }
+
+    return () => {
+      window.removeEventListener('resize', checkMobile)
+    }
+  }, [isMobile])
+
   return (
-    <div className="
-                tiptap
-                prose
-                prose-sm 
-                sm:prose-base 
-                lg:prose-lg
-                xl:prose-2xl
-                focus:outline-none
-            ">   {/* IMPORTANT */}
-      <EditorContent editor={editor} className='border rounded border-primary/20 active:border-primary' />
-    <TiptapToolbar editor={editor} />
-      {/* <FloatingMenu editor={editor}>This is the floating menu</FloatingMenu>
-      <BubbleMenu editor={editor}>This is the bubble menu</BubbleMenu> */}
+    <div 
+      ref={containerRef}
+      className={`
+        tiptap
+        prose
+        prose-base
+        sm:prose-lg
+        lg:prose-xl
+        xl:prose-2xl
+        focus:outline-none
+        ${isMobile && isFocused ? 'mobile-editor-focused' : ''}
+      `}
+    >
+      <EditorContent 
+        editor={editor} 
+        className='border rounded border-primary/20 active:border-primary min-h-[200px] p-3 text-lg' 
+      />
+      <TiptapToolbar editor={editor} isMobile={isMobile} isFocused={isFocused} />
     </div>
   )
 }

frontend/src/components/common/tiptap-toolbar.tsx

@@ -41,9 +41,11 @@ import { useEditorState } from '@tiptap/react'
 
 interface Props {
   editor: Editor
+  isMobile?: boolean
+  isFocused?: boolean
 }
 
-export default function TiptapToolbar({ editor }: Props) {
+export default function TiptapToolbar({ editor, isMobile = false, isFocused = false }: Props) {
   const state = useEditorState({
     editor,
     selector: ({ editor }) => ({
@@ -72,7 +74,14 @@ export default function TiptapToolbar({ editor }: Props) {
   })
 
   return (
-    <Toolbar variant="floating" className="flex-wrap gap-1 border rounded">
+    <Toolbar 
+      variant="floating" 
+      className={`flex-wrap gap-1 border rounded ${
+        isMobile && isFocused 
+          ? 'mobile-toolbar-fixed' 
+          : ''
+      }`}
+    >
       {/* TEXT MARKS */}
       <ToolbarGroup>
         <Button  className="  " 

frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

frontend/src/index.css

@@ -178,6 +178,76 @@ body {
   li::marker {
     color: black;
   }
+
+  /* Increase base font size */
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75;
+}
+
+.tiptap p {
+  font-size: 1.125rem !important;
+  line-height: 1.75 !important;
+}
+
+.tiptap .ProseMirror {
+  font-size: 1.125rem !important;
+  line-height: 1.75 !important;
+  min-height: 200px;
+}
+
+.tiptap .ProseMirror p {
+  font-size: 1.125rem !important;
+  line-height: 1.75 !important;
+}
 
-
+.tiptap .ProseMirror > * {
+  font-size: 1.125rem !important;
+}
+
+/* Mobile keyboard handling */
+@media (max-width: 768px) {
+  .tiptap.mobile-editor-focused {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .tiptap.mobile-editor-focused .ProseMirror {
+    order: 1;
+    margin-bottom: 0;
+    padding-bottom: 240px !important; /* Space for toolbar above keyboard */
+  }
+
+  .tiptap.mobile-editor-focused .tiptap-toolbar.mobile-toolbar-fixed {
+    order: 2;
+    position: fixed !important;
+    bottom: env(keyboard-inset-height, 0) !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    z-index: 9999 !important;
+    background: white !important;
+    border-top: 1px solid #e5e7eb !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-bottom: none !important;
+    border-radius: 0 !important;
+    padding: 0.75rem !important;
+    max-height: 180px !important;
+    overflow-y: auto !important;
+    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+    margin: 0 !important;
+    box-shadow: var(--tt-shadow-elevated-md) !important;
+  }
+
+  /* Dark mode support */
+  .dark .tiptap.mobile-editor-focused .tiptap-toolbar.mobile-toolbar-fixed {
+    background: oklch(0.21 0.006 285.885) !important;
+    border-top-color: oklch(1 0 0 / 10%) !important;
+  }
+
+  /* Ensure dialog content can scroll when keyboard is open */
+  .tiptap.mobile-editor-focused {
+    max-height: calc(100vh - env(keyboard-inset-height, 0px));
+  }
 }