{/* Title Bar */}
diff --git a/src/components/ApplicationHeader/ApplicationHeader.tsx b/src/components/ApplicationHeader/ApplicationHeader.tsx
index c4fd1ca..4bc7627 100644
--- a/src/components/ApplicationHeader/ApplicationHeader.tsx
+++ b/src/components/ApplicationHeader/ApplicationHeader.tsx
@@ -1,54 +1,54 @@
-'use client';
+"use client";
import {
-Header,
-HeaderContainer,
-HeaderName,
-HeaderNavigation,
-HeaderMenuButton,
-HeaderMenuItem,
-SkipToContent,
-SideNav,
-SideNavItems,
-HeaderSideNavItems,
-} from '@carbon/react';
+ Header,
+ HeaderContainer,
+ HeaderName,
+ HeaderNavigation,
+ HeaderMenuButton,
+ HeaderMenuItem,
+ SkipToContent,
+ SideNav,
+ SideNavItems,
+ HeaderSideNavItems,
+} from "@carbon/react";
-import Link from 'next/link';
+import Link from "next/link";
const ApplicationHeader = () => (
-
(
-
-
-
-
-Template
-
-
-
-Google
-
-
-
-
-
-
-Google
-
-
-
-
-
-)}
-/>
+ (
+
+
+
+
+ Template
+
+
+
+ Google
+
+
+
+
+
+
+ Google
+
+
+
+
+
+ )}
+ />
);
export default ApplicationHeader;
diff --git a/src/components/DocumentEditor/DocumentEditor.tsx b/src/components/DocumentEditor/DocumentEditor.tsx
index 3f340cc..370a04e 100644
--- a/src/components/DocumentEditor/DocumentEditor.tsx
+++ b/src/components/DocumentEditor/DocumentEditor.tsx
@@ -42,6 +42,35 @@ const DocumentEditor = forwardRef(
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ref]);
+ // Scroll the cursor into view when the soft keyboard opens on mobile.
+ // The Visual Viewport API fires a "resize" event whenever the visible area
+ // shrinks (e.g. keyboard appearing). If the cursor ends up below the new
+ // viewport bottom we nudge it back into view.
+ useEffect(() => {
+ const vv = window.visualViewport;
+ if (!vv) return;
+
+ const scrollCursorIntoView = () => {
+ const sel = window.getSelection();
+ if (!sel || !sel.rangeCount) return;
+
+ const rects = sel.getRangeAt(0).getClientRects();
+ if (!rects.length) return;
+ const cursorRect = rects[rects.length - 1];
+
+ if (cursorRect.bottom > vv.offsetTop + vv.height) {
+ const focusEl =
+ sel.focusNode?.nodeType === Node.TEXT_NODE
+ ? sel.focusNode.parentElement
+ : (sel.focusNode as Element | null);
+ focusEl?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+ }
+ };
+
+ vv.addEventListener('resize', scrollCursorIntoView);
+ return () => vv.removeEventListener('resize', scrollCursorIntoView);
+ }, []);
+
const handleInput = (e: React.FormEvent) => {
const el = e.currentTarget;
const text = el.innerText;
diff --git a/src/components/Ribbon/Ribbon.tsx b/src/components/Ribbon/Ribbon.tsx
index b2f0c57..33c98a7 100644
--- a/src/components/Ribbon/Ribbon.tsx
+++ b/src/components/Ribbon/Ribbon.tsx
@@ -59,6 +59,22 @@ interface RibbonProps {
onCitationStyleChange: (style: string) => void;
}
+// ─── Mobile context / hook ────────────────────────────────────────────────────
+
+const RibbonMobileContext = React.createContext(false);
+
+const useMobileRibbon = () => {
+ const [isMobile, setIsMobile] = React.useState(false);
+ React.useEffect(() => {
+ const mq = window.matchMedia('(max-width: 815px)');
+ setIsMobile(mq.matches);
+ const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+ mq.addEventListener('change', handler);
+ return () => mq.removeEventListener('change', handler);
+ }, []);
+ return isMobile;
+};
+
// ─── Helper sub-components ────────────────────────────────────────────────────
const RibbonChunk = ({
@@ -69,15 +85,88 @@ const RibbonChunk = ({
label: string;
children: React.ReactNode;
launcher?: React.ReactNode;
-}) => (
-
-
{children}
-
-
{label}
- {launcher &&
{launcher}}
+}) => {
+ const isMobile = React.useContext(RibbonMobileContext);
+ const [open, setOpen] = React.useState(false);
+ const [menuPos, setMenuPos] = React.useState({ top: 0, left: 0 });
+ const btnRef = React.useRef
(null);
+ const menuRef = React.useRef(null);
+
+ React.useEffect(() => {
+ if (!open) return;
+ const handleOutside = (e: MouseEvent) => {
+ const t = e.target as Node;
+ if (!btnRef.current?.contains(t) && !menuRef.current?.contains(t)) {
+ setOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handleOutside);
+ return () => document.removeEventListener('mousedown', handleOutside);
+ }, [open]);
+
+ if (isMobile) {
+ const handleToggle = () => {
+ if (!open && btnRef.current) {
+ const rect = btnRef.current.getBoundingClientRect();
+ const MARGIN = 8;
+ // MIN_WIDTH matches the CSS min-width of .ribbon-chunk-mobile-dropdown.
+ // Using it as a lower-bound estimate lets us pre-clamp right overflow
+ // synchronously, without needing a post-render measurement.
+ const MIN_WIDTH = 180;
+ const vw = window.innerWidth;
+ const top = rect.bottom + 2;
+ let left = rect.left;
+ if (left + MIN_WIDTH + MARGIN > vw) left = vw - MIN_WIDTH - MARGIN;
+ if (left < MARGIN) left = MARGIN;
+ setMenuPos({ top, left });
+ }
+ setOpen((o) => !o);
+ };
+
+ return (
+ <>
+
+ {open && typeof document !== 'undefined' && ReactDOM.createPortal(
+
+ {children}
+ {launcher &&
{launcher}
}
+
+
{children}
+
+ {label}
+ {launcher && {launcher}}
+
-);
+ );
+};
const RibbonDivider = () =>
;
@@ -290,9 +379,11 @@ const Ribbon = ({
onCitationStyleChange,
}: RibbonProps) => {
const fmt = (cmd: string, val?: string) => () => onFormat(cmd, val);
+ const isMobile = useMobileRibbon();
return (
-
+
+
Home
@@ -770,6 +861,7 @@ const Ribbon = ({
+
);
};