@eightyfourthousand/lib-editing 2026.3.0 → 2026.4.0

package/README.md

@@ -1,6 +1,8 @@
-# lib-editing
+# @eightyfourthousand/lib-editing
 
-This library was generated with [Nx](https://nx.dev).
+Shared editing and reader components for 84000 translation workflows.
+
+Use this package for the translation editor, reader UI, shared body-panel rendering, and related editing helpers.
 
 ## Running unit tests
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightyfourthousand/lib-editing",
-  "version": "2026.3.0",
+  "version": "2026.4.0",
   "description": "Shared editing and reader components for 84000 translation workflows.",
   "private": false,
   "repository": {
@@ -17,12 +17,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@eightyfourthousand/client-graphql": "^2026.3.0",
-    "@eightyfourthousand/data-access": "^2026.3.0",
-    "@eightyfourthousand/design-system": "^2026.3.0",
-    "@eightyfourthousand/lib-instr": "^2026.3.0",
-    "@eightyfourthousand/lib-search": "^2026.3.0",
-    "@eightyfourthousand/lib-utils": "^2026.3.0"
+    "@eightyfourthousand/client-graphql": "^2026.3.1",
+    "@eightyfourthousand/data-access": "^2026.3.1",
+    "@eightyfourthousand/design-system": "^2026.3.1",
+    "@eightyfourthousand/lib-instr": "^2026.3.1",
+    "@eightyfourthousand/lib-search": "^2026.3.1",
+    "@eightyfourthousand/lib-utils": "^2026.3.1"
   },
   "peerDependencies": {
     "next": "^16.0.0",

package/src/lib/components/editor/EditorBackMatterPage.tsx

@@ -18,6 +18,7 @@ import { TranslationBuilder } from '../editor';
 import { isStaticFeatureEnabled } from '@eightyfourthousand/lib-instr/static';
 
 export const EditorBackMatterPage = () => {
+  const withAttestations = isStaticFeatureEnabled('glossary-attestations');
   const { work } = useEditorState();
   const [endnotes, setEndnotes] = useState<TranslationEditorContent>();
   const [abbreviations, setAbbreviations] =
@@ -29,7 +30,6 @@ export const EditorBackMatterPage = () => {
     (async () => {
       const { uuid } = work;
       const graphqlClient = createGraphQLClient();
-      const withAttestations = isStaticFeatureEnabled('glossary-attestations');
 
       const [
         { blocks: endnoteBlocks },
@@ -90,6 +90,8 @@ export const EditorBackMatterPage = () => {
       bibliography={bibliography}
       abbreviations={abbreviations}
       renderTranslation={renderTranslation}
+      withAttestations={withAttestations}
+      isEditor={true}
     />
   );
 };

package/src/lib/components/editor/EditorHeader.tsx

@@ -15,7 +15,7 @@ export const EditorHeader = () => {
   );
 
   return (
-    <div className="px-4 py-3 flex justify-end h-12 z-10 gap-2">
+    <div className="px-4 py-3 flex justify-end h-12 z-10 gap-2 pointer-events-none [&>*]:pointer-events-auto">
       {isDirty && <SaveButton size="xs" onClick={save} />}
     </div>
   );

package/src/lib/components/editor/EditorProvider.tsx

@@ -7,6 +7,7 @@ import type { Passage, Work } from '@eightyfourthousand/data-access';
 import {
   createGraphQLClient,
   hasPermission,
+  type ReplacedPassage,
   savePassages,
 } from '@eightyfourthousand/client-graphql';
 import { passagesFromNodes, ensureUuids } from '../../passage';
@@ -19,6 +20,7 @@ interface EditorContextState {
   work: Work;
   dirtyStore: DirtyStore;
   canEdit(): Promise<boolean>;
+  applyReplacedPassages: (passages: ReplacedPassage[]) => Promise<void>;
   getFragment: (builder: string) => XmlFragment;
   setDoc: (doc: Doc) => void;
   getEditor: (key: string) => Editor | undefined;
@@ -57,6 +59,9 @@ export const EditorContext = createContext<EditorContextState>({
     getSnapshot: () => false,
   },
   canEdit: async () => false,
+  applyReplacedPassages: async () => {
+    // No-op when outside provider
+  },
   getFragment: () => {
     throw Error('Not implemented');
   },
@@ -373,6 +378,76 @@ export const EditorContextProvider = ({
     return await hasPermission({ client, permission: 'EDITOR_EDIT' });
   }, [client]);
 
+  const applyReplacedPassages = useCallback(
+    async (passages: ReplacedPassage[]) => {
+      if (passages.length === 0) {
+        return;
+      }
+
+      setNavigating(true);
+
+      try {
+        const passagesByUuid = new Map(
+          passages
+            .filter(
+              (passage): passage is ReplacedPassage & { json: NonNullable<ReplacedPassage['json']> } =>
+                Boolean(passage.json),
+            )
+            .map((passage) => [passage.uuid, passage]),
+        );
+
+        Object.values(editorCache.current).forEach((editor) => {
+          if (editor.isDestroyed || passagesByUuid.size === 0) {
+            return;
+          }
+
+          const replacements: Array<{
+            from: number;
+            nodeSize: number;
+            replacement: NonNullable<ReplacedPassage['json']>;
+          }> = [];
+
+          editor.state.doc.descendants((node, pos) => {
+            if (node.type.name !== 'passage' || !node.attrs.uuid) {
+              return true;
+            }
+
+            const replacement = passagesByUuid.get(node.attrs.uuid);
+            if (replacement?.json) {
+              replacements.push({
+                from: pos,
+                nodeSize: node.nodeSize,
+                replacement: replacement.json,
+              });
+            }
+
+            return true;
+          });
+
+          if (replacements.length === 0) {
+            return;
+          }
+
+          let tr = editor.state.tr;
+          replacements
+            .sort((a, b) => b.from - a.from)
+            .forEach(({ from, nodeSize, replacement }) => {
+              tr = tr.replaceWith(
+                from,
+                from + nodeSize,
+                editor.schema.nodeFromJSON(replacement),
+              );
+            });
+
+          editor.view.dispatch(tr);
+        });
+      } finally {
+        setNavigating(false);
+      }
+    },
+    [setNavigating],
+  );
+
   return (
     <EditorContext.Provider
       value={{
@@ -380,6 +455,7 @@ export const EditorContextProvider = ({
         doc,
         dirtyStore,
         canEdit,
+        applyReplacedPassages,
         getFragment,
         setDoc,
         getEditor,

package/src/lib/components/editor/PaginationProvider.tsx

@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
   useEffect,
+  useMemo,
 } from 'react';
 import { Editor } from '@tiptap/react';
 import { TranslationEditorContent } from './TranslationEditor';
@@ -23,6 +24,7 @@ import { isUuid, scrollToElement, useIsMobile } from '@eightyfourthousand/lib-ut
 import { PanelName, TabName, useNavigation } from '../shared';
 import { LotusPond, SHEET_ANIMATION_DURATION } from '@eightyfourthousand/design-system';
 import { useEditorState } from './EditorProvider';
+import { usePaginationLoadTriggers } from '../shared/hooks/usePaginationLoadTriggers';
 
 const LOADING_SKELETONS_COUNT = 3;
 const CHUNK_SIZE = 25;
@@ -100,13 +102,10 @@ export const PaginationProvider = ({
   const [startIsLoading, setStartIsLoading] = useState(false);
   const [endIsLoading, setEndIsLoading] = useState(true);
   const [isEditorReady, setIsEditorReady] = useState(false);
-  const loadMoreAtStartRef = useRef<HTMLDivElement>(null);
-  const loadMoreAtEndRef = useRef<HTMLDivElement>(null);
   const childrenDivRef = useRef<HTMLDivElement>(null);
-  const shouldLoadMoreAtStartRef = useRef(false);
-  const shouldLoadMoreAtEndRef = useRef(false);
-  const [loadMoreTrigger, setLoadMoreTrigger] = useState(0);
-  const dataClient = createGraphQLClient();
+  const handledStartLoadRequestRef = useRef(0);
+  const handledEndLoadRequestRef = useRef(0);
+  const dataClient = useMemo(() => createGraphQLClient(), []);
 
   const { panels, updatePanel, setShowOuterContent } = useNavigation();
   const isMobile = useIsMobile();
@@ -117,7 +116,9 @@ export const PaginationProvider = ({
   // matches — this prevents a PaginationProvider for one tab (e.g. endnotes)
   // from reacting to hashes set by a different tab (e.g. glossary).
   const panelHash =
-    !tab || panels[panel]?.tab === tab ? panels[panel]?.hash : undefined;
+    !tab || panels[panel]?.tab === tab || (tab === 'translation' && panels[panel]?.tab === 'compare')
+      ? panels[panel]?.hash
+      : undefined;
 
   const { extensions } = useTranslationExtensions({
     fragment,
@@ -133,6 +134,18 @@ export const PaginationProvider = ({
       onCreate?.({ editor });
     },
   });
+  const {
+    loadMoreAtStartRef,
+    loadMoreAtEndRef,
+    startLoadRequest,
+    endLoadRequest,
+  } = usePaginationLoadTriggers({
+    enabled: isEditorReady,
+    startCursor,
+    endCursor,
+    startIsLoading,
+    endIsLoading,
+  });
 
   useEffect(() => {
     setShowOuterContent(!startCursor);
@@ -265,12 +278,6 @@ export const PaginationProvider = ({
       } finally {
         isNavigatingRef.current = false;
         setNavigating(false);
-        // Re-trigger load-more check: the observer may have fired while
-        // navigation was in progress (sentinel entered view after content
-        // was replaced), but the load-more effect was blocked by the
-        // isNavigatingRef guard. Bumping the trigger re-evaluates now
-        // that navigation is complete.
-        setLoadMoreTrigger((c) => c + 1);
       }
     })();
   }, [
@@ -294,43 +301,18 @@ export const PaginationProvider = ({
     };
   }, [editor]);
 
-  // Set up IntersectionObserver only after the editor has created and rendered
-  // initial content. isEditorReady flips to true once and stays true, so the
-  // observer is created once and never torn down/recreated during page fetches.
-  useEffect(() => {
-    if (!isEditorReady) return;
-
-    const startEl = loadMoreAtStartRef.current;
-    const endEl = loadMoreAtEndRef.current;
-
-    const observer = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === startEl) {
-          shouldLoadMoreAtStartRef.current = entry.isIntersecting;
-        } else if (entry.target === endEl) {
-          shouldLoadMoreAtEndRef.current = entry.isIntersecting;
-        }
-        if (entry.isIntersecting) {
-          setLoadMoreTrigger((c) => c + 1);
-        }
-      }
-    });
-
-    if (startEl) observer.observe(startEl);
-    if (endEl) observer.observe(endEl);
-
-    return () => observer.disconnect();
-  }, [isEditorReady]);
-
   useEffect(() => {
     if (
+      endLoadRequest === 0 ||
+      handledEndLoadRequestRef.current === endLoadRequest ||
       endIsLoading ||
-      !shouldLoadMoreAtEndRef.current ||
       !endCursor ||
       isNavigatingRef.current
     ) {
       return;
     }
+
+    handledEndLoadRequestRef.current = endLoadRequest;
     setEndIsLoading(true);
 
     (async () => {
@@ -363,18 +345,21 @@ export const PaginationProvider = ({
     editor,
     endCursor,
     dataClient,
-    loadMoreTrigger,
+    endLoadRequest,
   ]);
 
   useEffect(() => {
     if (
+      startLoadRequest === 0 ||
+      handledStartLoadRequestRef.current === startLoadRequest ||
       startIsLoading ||
-      !shouldLoadMoreAtStartRef.current ||
       !startCursor ||
       isNavigatingRef.current
     ) {
       return;
     }
+
+    handledStartLoadRequestRef.current = startLoadRequest;
     setStartIsLoading(true);
 
     (async () => {
@@ -425,7 +410,7 @@ export const PaginationProvider = ({
     editor,
     startCursor,
     dataClient,
-    loadMoreTrigger,
+    startLoadRequest,
   ]);
 
   return (

package/src/lib/components/editor/extensions/Heading/Heading.ts

@@ -7,11 +7,13 @@ import {
   H3_STYLE,
   H4_STYLE,
   H5_STYLE,
+  H6_STYLE,
   HONORIFIC_TITLE_STYLE,
   SECTION_TITLE_STYLE,
 } from '@eightyfourthousand/design-system';
 import { createNodeViewDom } from '../../util';
 import { HTMLElementType } from 'react';
+import { cn } from '@eightyfourthousand/lib-utils';
 
 const CLASS_FOR_LEVEL: Record<Level, string> = {
   1: H1_STYLE,
@@ -19,7 +21,7 @@ const CLASS_FOR_LEVEL: Record<Level, string> = {
   3: H3_STYLE,
   4: H4_STYLE,
   5: H5_STYLE,
-  6: H5_STYLE,
+  6: H6_STYLE,
 };
 
 const CLASS_FOR_CLASS: Record<string, string> = {
@@ -47,8 +49,7 @@ export const Heading = TiptapHeading.extend({
       const hasLevel = this.options.levels.includes(nodeLevel);
       const level = hasLevel ? nodeLevel : this.options.levels.at(-1);
       const element = `h${level}` as HTMLElementType;
-      const className =
-        CLASS_FOR_CLASS[node.attrs.class] || CLASS_FOR_LEVEL[nodeLevel];
+      const className = cn(CLASS_FOR_LEVEL[nodeLevel], CLASS_FOR_CLASS[node.attrs.class]);
 
       const { dom } = createNodeViewDom({
         editor,

package/src/lib/components/editor/extensions/InternalLink/InternalLink.ts

@@ -91,7 +91,10 @@ export const InternalLink = Mark.create<InternalLinkOptions>({
         e.preventDefault();
         if (!isSameWork) {
           // Cross-work links open in a new tab
-          const href = props.mark.attrs.href || '#';
+          let href = props.mark.attrs.href || '#';
+          if (isEditable && href) {
+            href = `${href}?edit=true`;
+          }
           window.open(href, '_blank');
           return
         }

package/src/lib/components/editor/extensions/Mention/Mention.ts

@@ -86,7 +86,10 @@ export const Mention = Node.create<MentionOptions>({
         anchor.textContent = item.text || item.displayText || item.entity;
 
         // Compute href from linkType + entity
-        const href = `/entity/${item.linkType}/${item.entity}`;
+        let href = `/entity/${item.linkType}/${item.entity}`;
+        if (isEditable) {
+          href = `${href}?edit=true`;
+        }
 
         if (item.isSameWork) {
           // Same-work links navigate in-place via panel system

package/src/lib/components/editor/extensions/Passage/EditorOptions.tsx

@@ -11,11 +11,11 @@ export const EditorOptions = ({
   return (
     <>
       <DropdownMenuItem onSelect={() => onSelection('label')}>
-        <PencilIcon className="text-ochre" /> Edit Label
+        <PencilIcon className="text-Primary" /> Edit Label
       </DropdownMenuItem>
       <DropdownMenuSeparator />
       <DropdownMenuItem onSelect={() => onSelection('attributes')}>
-        <BracesIcon className="text-ochre" /> View Attributes
+        <BracesIcon className="text-primary" /> View Attributes
       </DropdownMenuItem>
       <DropdownMenuSeparator />
       <DropdownMenuItem

package/src/lib/components/editor/extensions/Passage/Passage.tsx

@@ -56,7 +56,7 @@ const PassageComponent = (props: NodeViewProps) => {
     }
 
     const alignment = node.attrs.alignments?.[toh] as Alignment;
-    const source = alignment?.tibetan || '';
+    const source = alignment?.tibetan.trim() || '';
 
     const firstChild = node.content.firstChild;
     let compareLeadingSpace = 'md:mt-1';
@@ -93,7 +93,7 @@ const PassageComponent = (props: NodeViewProps) => {
   }, [node.attrs.uuid, editor]);
 
   const className =
-    'absolute labeled -left-16 w-16 text-end hover:cursor-pointer -mt-0.25';
+    'absolute labeled -left-16 w-16 text-end hover:cursor-pointer';
   const borderClassName =
     editor.storage.globalConfig.debug && node.attrs.invalid
       ? 'after:content-["⚠️"] after:absolute after:top-0 after:-right-5'
@@ -223,7 +223,7 @@ const PassageComponent = (props: NodeViewProps) => {
       <div
         className={cn('w-full', source ? '' : 'hidden', compareLeadingSpace)}
       >
-        <LabeledElement label={node.attrs.label} className="mt-0.5">
+        <LabeledElement className="mt-0.5">
           <div className="leading-7 font-tibetan text-lg whitespace-normal mt-1.5 pb-4 md:pb-2">
             {source}
           </div>

package/src/lib/components/editor/extensions/Passage/ReaderOptions.tsx

@@ -30,12 +30,12 @@ export const ReaderOptions = (
   return (
     <>
       <DropdownMenuItem onSelect={props.toggleBookmark}>
-        <BookmarkIcon className="text-ochre" />
+        <BookmarkIcon className="text-primary" />
         {props.isBookmarked ? 'Remove Bookmark' : 'Add Bookmark'}
       </DropdownMenuItem>
       <DropdownMenuSeparator />
       <DropdownMenuItem onSelect={copyLink}>
-        <CopyIcon className="text-ochre" /> Copy Link
+        <CopyIcon className="text-primary" /> Copy Link
       </DropdownMenuItem>
       {props.onSuggestRevision && (
         <>
@@ -46,7 +46,7 @@ export const ReaderOptions = (
               props.onSuggestRevision?.();
             }}
           >
-            <MessageSquareIcon className="text-ochre" /> Suggest Revision
+            <MessageSquareIcon className="text-primary" /> Suggest Revision
           </DropdownMenuItem>
         </>
       )}

package/src/lib/components/editor/extensions/Passage/ShowAnnotations.tsx

@@ -54,13 +54,13 @@ export const ShowAnnotations = (props: NodeViewProps) => {
       </DialogDescription>
 
       <div className="text-sm flex gap-1">
-        <span className="text-navy">UUID: </span>
+        <span className="text-primary">UUID: </span>
         <span>{node.attrs.uuid}</span>
         <span className="text-muted-foreground px-2">{'|'}</span>
-        <span className="text-navy">Label:</span>
+        <span className="text-primary">Label:</span>
         <span>{node.attrs.label}</span>
         <span className="text-muted-foreground px-2">{'|'}</span>
-        <span className="text-navy">Type:</span>
+        <span className="text-primary">Type:</span>
         <span>{node.attrs.type}</span>
       </div>
 

package/src/lib/components/editor/extensions/TitlesNode.ts

@@ -4,7 +4,7 @@ import { Node, mergeAttributes } from '@tiptap/core';
 // TODO: make nice custom components for each titles type
 
 const BASE_STYLE =
-  'relative border-t border-border/50 pb-8 pt-12 before:absolute before:top-0 before:text-lg before:font-light before:text-slate';
+  'relative border-t border-border/50 pb-8 pt-12 before:absolute before:top-0 before:text-lg before:text-secondary';
 
 export const TohsNode = Node.create({
   name: 'tohs',

package/src/lib/components/reader/ReaderBackMatterPage.tsx

@@ -57,6 +57,7 @@ export const ReaderBackMatterPage = async ({
       bibliography={bibliography}
       endnotes={endnotes}
       glossary={glossary}
+      withAttestations={withAttestations}
     />
   );
 };

package/src/lib/components/reader/ReaderBackMatterPanel.tsx

@@ -15,12 +15,14 @@ export const ReaderBackMatterPanel = ({
   glossary,
   bibliography,
   abbreviations,
+  withAttestations = false,
 }: {
   workUuid: string;
   endnotes: TranslationEditorContent;
   glossary: GlossaryTermsPage;
   bibliography: BibliographyEntries;
   abbreviations: TranslationEditorContent;
+  withAttestations?: boolean;
 }) => {
   const { hasTranslationContent } = useNavigation();
   if (!hasTranslationContent) {
@@ -48,6 +50,7 @@ export const ReaderBackMatterPanel = ({
       bibliography={bibliography}
       abbreviations={abbreviations}
       renderTranslation={renderTranslation}
+      withAttestations={withAttestations}
     />
   );
 };

package/src/lib/components/reader/ReaderBodyPanel.tsx

@@ -15,7 +15,7 @@ import { TranslationReader } from './TranslationReader';
 const TITLE_VARIANTS_FOR_TABS: { [key: string]: TitlesVariant } = {
   translation: 'english',
   source: 'tibetan',
-  front: 'english',
+  front: 'front',
   compare: 'comparison',
 };
 

package/src/lib/components/shared/BackMatterPanel.tsx

@@ -1,6 +1,11 @@
 'use client';
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@eightyfourthousand/design-system';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@eightyfourthousand/design-system';
 import { TranslationEditorContent } from '../editor';
 import { TranslationRenderer } from './types';
 import { BibliographyEntries } from '@eightyfourthousand/data-access';
@@ -18,6 +23,8 @@ export const BackMatterPanel = ({
   glossary,
   bibliography,
   abbreviations,
+  isEditor = false,
+  withAttestations = false,
   renderTranslation,
 }: {
   workUuid: string;
@@ -25,6 +32,8 @@ export const BackMatterPanel = ({
   glossary: GlossaryTermsPage;
   bibliography: BibliographyEntries;
   abbreviations: TranslationEditorContent;
+  isEditor?: boolean;
+  withAttestations?: boolean;
   renderTranslation: (
     params: TranslationRenderer,
   ) => ReactElement<TranslationRenderer>;
@@ -39,8 +48,7 @@ export const BackMatterPanel = ({
     !!panels.right.hash,
   );
 
-  const hasGlossary =
-    glossary.terms.length > 0 || glossary.hasMoreAfter;
+  const hasGlossary = glossary.terms.length > 0 || glossary.hasMoreAfter;
 
   return (
     <Tabs
@@ -54,7 +62,7 @@ export const BackMatterPanel = ({
         updatePanel({ name: 'right', state: { open: true, tab } });
       }}
       defaultValue="endnotes"
-      className="w-full gap-0 @container/sidebar"
+      className="w-full gap-0 @container/sidebar h-full flex flex-col"
     >
       <div className="sticky top-0 pt-1 pb-2 z-10 w-full rounded-t bg-background overflow-x-auto text-center">
         <TabsList
@@ -66,9 +74,7 @@ export const BackMatterPanel = ({
           {endnotes.length > 0 && (
             <TabsTrigger value="endnotes">Notes</TabsTrigger>
           )}
-          {hasGlossary && (
-            <TabsTrigger value="glossary">Glossary</TabsTrigger>
-          )}
+          {hasGlossary && <TabsTrigger value="glossary">Glossary</TabsTrigger>}
           {bibliography.length > 0 && (
             <TabsTrigger value="bibliography">Biblio</TabsTrigger>
           )}
@@ -77,10 +83,10 @@ export const BackMatterPanel = ({
           )}
         </TabsList>
       </div>
-      <div className="px-2">
+      <div className="flex-1 min-h-0">
         <div
           ref={scrollContainerRef}
-          className="overflow-auto md:h-[calc(100vh-8.5rem)] h-[calc(100vh-4rem)] rounded bg-surface"
+          className="overflow-auto h-full bg-surface"
           data-panel="right"
         >
           <div className="rounded ps-10 pe-4 max-w-readable mx-auto">
@@ -107,8 +113,9 @@ export const BackMatterPanel = ({
                 <GlossaryPaginationProvider
                   workUuid={workUuid}
                   initialPage={glossary}
+                  withAttestations={withAttestations}
                 >
-                  <GlossaryTermList />
+                  <GlossaryTermList isEditor={isEditor} />
                 </GlossaryPaginationProvider>
               </TabsContent>
             )}

package/src/lib/components/shared/BodyPanel.tsx

@@ -64,7 +64,7 @@ export const BodyPanel = ({
     panels.main.tab || (hasTranslationContent ? 'translation' : 'source');
   const safeTab =
     !hasTranslationContent &&
-    (activeTab === 'translation' || activeTab === 'compare')
+      (activeTab === 'translation' || activeTab === 'compare')
       ? 'source'
       : activeTab;
 
@@ -141,8 +141,8 @@ export const BodyPanel = ({
       defaultValue={hasTranslationContent ? 'translation' : 'source'}
       className="px-12 w-full"
     >
-      <div className="sticky top-0.75 -mt-28 z-10 w-full overflow-x-auto text-center">
-        <TabsList className="w-fit inline-flex">
+      <div className="sticky top-0.75 -mt-28 z-10 w-full overflow-x-auto text-center pointer-events-none">
+        <TabsList className="w-fit inline-flex pointer-events-auto">
           <TabsTrigger value="front">Front</TabsTrigger>
           {hasTranslationContent && (
             <TabsTrigger value="translation">Translation</TabsTrigger>
@@ -153,7 +153,7 @@ export const BodyPanel = ({
           <TabsTrigger value="source">Source</TabsTrigger>
         </TabsList>
       </div>
-      {showOuterContent ? theTitles : null}
+      {showOuterContent && safeTab === 'front' ? theTitles : null}
       <TabsContent
         value="front"
         forceMount
@@ -187,9 +187,9 @@ export const BodyPanel = ({
         >
           <div
             className={cn(
-              'w-full mx-auto',
+              'w-full mx-auto mt-8',
               safeTab === 'compare'
-                ? '2xl:max-w-7xl max-w-5xl mt-8'
+                ? '2xl:max-w-7xl max-w-5xl'
                 : 'max-w-readable',
             )}
           >