From f107437f94095ed50e3de4f2b81025c52c2f9ddd Mon Sep 17 00:00:00 2001
From: Greg Trihus <gtryus@gmail.com>
Date: Fri, 29 May 2026 12:07:08 -0500
Subject: [PATCH 1/3] TT-7290,7216,6739,7244,7081 Enhance MediaRecord and
 CommentEditor components with audio draft management and scrollbar handling

- TT-7290 Added `hideSegmentControls` prop to `MediaRecord` for better UI control.
- TT-7081 Implemented scrollbar width measurement and handling in `usePaneWidth` and `DiscussionPanel` to improve layout responsiveness.
- Introduced `onAudioDraftChange` callback in `CommentEditor` to manage audio draft state.
- Updated `DiscussionCard` to track audio draft status and integrate with `CommentEditor`.
- Refactored `DiscussionList` to utilize new state management for changes and scrollbar adjustments.
---
 .../components/Discussions/CommentEditor.tsx  | 238 +++++++++---------
 .../components/Discussions/DiscussionCard.tsx |  17 +-
 .../components/Discussions/DiscussionList.tsx |  11 +-
 .../Discussions/DiscussionPanel.tsx           |  37 ++-
 src/renderer/src/components/MediaRecord.tsx   |   3 +
 src/renderer/src/components/usePaneWidth.ts   |  18 +-
 src/renderer/src/utils/getScrollbarWidth.ts   |  26 ++
 src/renderer/src/utils/index.ts               |   1 +
 8 files changed, 218 insertions(+), 133 deletions(-)
 create mode 100644 src/renderer/src/utils/getScrollbarWidth.ts

diff --git a/src/renderer/src/components/Discussions/CommentEditor.tsx b/src/renderer/src/components/Discussions/CommentEditor.tsx
index 6eee00df..a9f8206a 100644
--- a/src/renderer/src/components/Discussions/CommentEditor.tsx
+++ b/src/renderer/src/components/Discussions/CommentEditor.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   TextField,
   Tooltip,
@@ -23,11 +24,15 @@ const RowDiv = styled('div')(() => ({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
+  flexWrap: 'wrap',
+  minWidth: 0,
 }));
 
 const ColumnDiv = styled('div')(() => ({
   display: 'flex',
   flexDirection: 'column',
+  minWidth: 0,
+  width: '100%',
 }));
 
 const StatusMessage = styled(Typography)<TypographyProps>(({ theme }) => ({
@@ -49,6 +54,7 @@ interface IProps extends IStateProps {
   onCancel?: () => void;
   setCanSaveRecording: (canSave: boolean) => void;
   onTextChange: (txt: string) => void;
+  onAudioDraftChange?: (hasDraft: boolean) => void;
 }
 export const CommentEditor = (props: IProps) => {
   const {
@@ -63,6 +69,7 @@ export const CommentEditor = (props: IProps) => {
     onCancel,
     setCanSaveRecording,
     onTextChange,
+    onAudioDraftChange,
   } = props;
   const {
     playing,
@@ -85,6 +92,7 @@ export const CommentEditor = (props: IProps) => {
   const doRecordRef = useRef(false);
   const [recording, setRecording] = useState(false);
   const [myChanged, setMyChanged] = useState(false);
+  const [showRecorder, setShowRecorder] = useState(false);
   const { commentId } = useArtifactType();
 
   const {
@@ -97,6 +105,16 @@ export const CommentEditor = (props: IProps) => {
     isChanged,
   } = useContext(UnsavedContext).state;
 
+  const setAudioDraft = (hasDraft: boolean) => {
+    onAudioDraftChange?.(hasDraft);
+  };
+
+  const clearUnsavedIfEmpty = () => {
+    if (!curText.length && !canSaveRef.current) {
+      toolChanged(toolId, false);
+    }
+  };
+
   useEffect(() => {
     return () => {
       if (doRecordRef.current) setCommentRecording(false);
@@ -123,11 +141,13 @@ export const CommentEditor = (props: IProps) => {
           100
         ).then(() => {
           doRecordRef.current = true;
+          setShowRecorder(true);
           setStartRecord(false);
         });
       } catch {
         //do it anyway...
         doRecordRef.current = true;
+        setShowRecorder(true);
         setStartRecord(false);
       }
   }, [startRecord, playing, itemPlaying, commentPlaying]);
@@ -137,11 +157,19 @@ export const CommentEditor = (props: IProps) => {
       canSaveRef.current = valid;
       setCanSave(valid);
       setCanSaveRecording(valid);
+      setAudioDraft(valid);
       if (valid) toolChanged(toolId, true);
+      else clearUnsavedIfEmpty();
     }
   };
   const onRecording = (r: boolean) => {
     setRecording(r);
+    if (r) {
+      toolChanged(toolId, true);
+    } else if (doRecordRef.current) {
+      // Paused/stopped: enable parent Add before blob-ready/canSave propagates (TT-7216).
+      setAudioDraft(true);
+    }
   };
   const handleTextChange = (e: any) => {
     setCurText(e.target.value);
@@ -163,6 +191,7 @@ export const CommentEditor = (props: IProps) => {
   };
 
   const handleRecord = () => {
+    toolChanged(toolId, true);
     setStartRecord(true);
     setCommentRecording(true);
   };
@@ -172,7 +201,13 @@ export const CommentEditor = (props: IProps) => {
     setStatusText('');
     setCurText('');
     doRecordRef.current = false;
+    setShowRecorder(false);
+    canSaveRef.current = false;
+    setCanSave(false);
+    setCanSaveRecording(false);
+    setAudioDraft(false);
     clearCompleted(toolId);
+    clearUnsavedIfEmpty();
   };
 
   useEffect(() => {
@@ -182,6 +217,81 @@ export const CommentEditor = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refresh]);
 
+  const recorderNode = (
+    <Box sx={{ width: '100%', minWidth: 0 }}>
+      <MediaRecord
+        toolId={toolId}
+        passageId={passageId}
+        artifactId={commentId}
+        onRecording={onRecording}
+        afterUploadCb={afterUploadCb}
+        defaultFilename={fileName}
+        allowWave={false}
+        setCanSave={handleSetCanSave}
+        setStatusText={setStatusText}
+        height={40}
+        width={400}
+        autoStart={true}
+        allowDeltaVoice={false}
+        allowNoNoise={false}
+        allowZoom={false}
+        keepItSmall={true}
+        oneTryOnly={false}
+        hideToolbar={true}
+        hideSegmentControls={true}
+        showSize={false}
+      />
+    </Box>
+  );
+
+  const actionButtons =
+    onOk &&
+    (!cancelOnlyIfChanged || doRecordRef.current || myChanged) && (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: '1px',
+          flexWrap: 'wrap',
+        }}
+      >
+        <Tooltip title={ts.cancel}>
+          <span>
+            <Button
+              id="cancel"
+              onClick={handleCancel}
+              sx={{
+                color: 'background.paper',
+                minWidth: 'auto',
+                padding: '2px 4px',
+              }}
+              disabled={recording}
+            >
+              <CancelIcon />
+            </Button>
+          </span>
+        </Tooltip>
+        <Tooltip title={ts.save}>
+          <span>
+            <Button
+              id="ok"
+              onClick={handleOk}
+              sx={{
+                color: 'background.paper',
+                minWidth: 'auto',
+                padding: '2px 4px',
+              }}
+              disabled={
+                (!canSave && !curText.length) || !myChanged || recording
+              }
+            >
+              <SendIcon />
+            </Button>
+          </span>
+        </Tooltip>
+      </Box>
+    );
+
   return (
     <ColumnDiv id="commentedit">
       <TextField
@@ -194,100 +304,20 @@ export const CommentEditor = (props: IProps) => {
         label={t.comment}
         focused
       />
-      {doRecordRef.current ? (
-        <>
+      {showRecorder ? (
+        <ColumnDiv style={{ gap: '8px', marginTop: '4px' }}>
+          {recorderNode}
           <RowDiv
             style={{
-              alignItems: 'flex-start',
-              justifyContent: 'flex-start',
+              alignItems: 'center',
+              justifyContent: 'space-between',
               gap: '8px',
             }}
           >
-            <MediaRecord
-              toolId={toolId}
-              passageId={passageId}
-              artifactId={commentId}
-              onRecording={onRecording}
-              afterUploadCb={afterUploadCb}
-              defaultFilename={fileName}
-              allowWave={false}
-              setCanSave={handleSetCanSave}
-              setStatusText={setStatusText}
-              height={40}
-              width={250}
-              autoStart={true}
-              allowDeltaVoice={false}
-              allowNoNoise={false}
-              allowZoom={false}
-              keepItSmall={true}
-              oneTryOnly={false}
-              hideToolbar={true}
-              showSize={false}
-            />
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                gap: '4px',
-                flexShrink: 0,
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'flex-start',
-                  gap: '1px',
-                }}
-              >
-                {onOk &&
-                  (!cancelOnlyIfChanged ||
-                    doRecordRef.current ||
-                    myChanged) && (
-                    <Tooltip title={ts.cancel}>
-                      <span>
-                        <Button
-                          id="cancel"
-                          onClick={handleCancel}
-                          sx={{
-                            color: 'background.paper',
-                            minWidth: 'auto',
-                            padding: '2px 4px',
-                          }}
-                          disabled={recording}
-                        >
-                          <CancelIcon />
-                        </Button>
-                      </span>
-                    </Tooltip>
-                  )}
-                {onOk && (
-                  <Tooltip title={ts.save}>
-                    <span>
-                      <Button
-                        id="ok"
-                        onClick={handleOk}
-                        sx={{
-                          color: 'background.paper',
-                          minWidth: 'auto',
-                          padding: '2px 4px',
-                        }}
-                        disabled={
-                          (!canSave && !curText.length) ||
-                          !myChanged ||
-                          recording
-                        }
-                      >
-                        <SendIcon />
-                      </Button>
-                    </span>
-                  </Tooltip>
-                )}
-              </div>
-              <StatusMessage variant="caption">{statusText}</StatusMessage>
-            </div>
+            {actionButtons}
+            <StatusMessage variant="caption">{statusText}</StatusMessage>
           </RowDiv>
-        </>
+        </ColumnDiv>
       ) : (
         <RowDiv>
           <Tooltip title={commentRecording ? t.recordUnavailable : t.record}>
@@ -303,37 +333,7 @@ export const CommentEditor = (props: IProps) => {
           </Tooltip>
           <div>
             <StatusMessage variant="caption">{statusText}</StatusMessage>
-            {onOk &&
-              (!cancelOnlyIfChanged || doRecordRef.current || myChanged) && (
-                <Tooltip title={ts.cancel}>
-                  <span>
-                    <Button
-                      id="cancel"
-                      onClick={handleCancel}
-                      sx={{ color: 'background.paper' }}
-                      disabled={recording}
-                    >
-                      <CancelIcon />
-                    </Button>
-                  </span>
-                </Tooltip>
-              )}
-            {onOk && (
-              <Tooltip title={ts.save}>
-                <span>
-                  <Button
-                    id="ok"
-                    onClick={handleOk}
-                    sx={{ color: 'background.paper' }}
-                    disabled={
-                      (!canSave && !curText.length) || !myChanged || recording
-                    }
-                  >
-                    <SendIcon />
-                  </Button>
-                </span>
-              </Tooltip>
-            )}
+            {actionButtons}
           </div>
         </RowDiv>
       )}
diff --git a/src/renderer/src/components/Discussions/DiscussionCard.tsx b/src/renderer/src/components/Discussions/DiscussionCard.tsx
index a6b196d4..7e2679e3 100644
--- a/src/renderer/src/components/Discussions/DiscussionCard.tsx
+++ b/src/renderer/src/components/Discussions/DiscussionCard.tsx
@@ -277,6 +277,7 @@ export const DiscussionCard = (props: IProps) => {
   const [comment, setComment] = useState('');
   const commentMediaId = useRef<string | undefined>(undefined);
   const [canSaveRecording, setCanSaveRecording] = useState(false);
+  const [hasAudioDraft, setHasAudioDraft] = useState(false);
   const { userIsAdmin } = useRole();
 
   const CommentAuthor = (comment: CommentD) =>
@@ -357,6 +358,7 @@ export const DiscussionCard = (props: IProps) => {
     setEditCategory('');
     setComment('');
     commentText.current = '';
+    setHasAudioDraft(false);
     setMoveTo(undefined);
   };
 
@@ -801,6 +803,7 @@ export const DiscussionCard = (props: IProps) => {
     cardSavingRef.current = true;
     commentText.current = '';
     commentMediaId.current = '';
+    setHasAudioDraft(false);
     onAddComplete && onAddComplete('');
     setEditing(false);
     setChanged(false);
@@ -968,6 +971,7 @@ export const DiscussionCard = (props: IProps) => {
                     comment={commentText.current}
                     refresh={refresh}
                     setCanSaveRecording={setCanSaveRecording}
+                    onAudioDraftChange={setHasAudioDraft}
                     fileName={fileName(editSubject, '')}
                     afterUploadCb={afterUploadCb}
                     passageId={passageId}
@@ -985,10 +989,19 @@ export const DiscussionCard = (props: IProps) => {
                       segSavingRef.current ||
                       !mediafileId ||
                       editSubject === '' ||
-                      !(canSaveRecording || myComments.length > 0 || comment)
+                      !(
+                        canSaveRecording ||
+                        hasAudioDraft ||
+                        myComments.length > 0 ||
+                        comment
+                      )
                     }
                   >
-                    {discussion.id ? ts.save : t.addComment}
+                    {onAddComplete
+                      ? t.addComment
+                      : discussion.id
+                        ? ts.save
+                        : t.addComment}
                   </Button>
                   <Button
                     id={`cancel-${discussion.id}`}
diff --git a/src/renderer/src/components/Discussions/DiscussionList.tsx b/src/renderer/src/components/Discussions/DiscussionList.tsx
index 58c9a622..fc264695 100644
--- a/src/renderer/src/components/Discussions/DiscussionList.tsx
+++ b/src/renderer/src/components/Discussions/DiscussionList.tsx
@@ -131,7 +131,7 @@ export function DiscussionList({ onClose }: DiscussionListProps) {
             boxSizing: 'border-box' as const,
           }
         : {
-            width: `${discussionSize.width - 64}px`, // leave room for scroll bar
+            width: '100%',
             maxHeight: `${discussionSize.height - 120}px`,
             boxSizing: 'border-box' as const,
           },
@@ -165,6 +165,7 @@ export function DiscussionList({ onClose }: DiscussionListProps) {
   const [confirmAction, setConfirmAction] = useState<string>('');
   const discussionOrg = useDiscussionOrg();
   const anyChangedRef = useRef(false);
+  const [anyChanged, setAnyChanged] = useState(false);
   const enum WaitSave {
     add = 'add',
     collapse = 'collapse',
@@ -441,9 +442,9 @@ export function DiscussionList({ onClose }: DiscussionListProps) {
   useEffect(() => {
     const myIds = displayDiscussions.map((d) => d.id);
     myIds.push(NewDiscussionToolId);
-    anyChangedRef.current = Object.keys(toolsChanged).some((t) =>
-      myIds.includes(t)
-    );
+    const changed = Object.keys(toolsChanged).some((t) => myIds.includes(t));
+    anyChangedRef.current = changed;
+    setAnyChanged(changed);
   }, [toolsChanged, displayDiscussions]);
 
   const checkChanged = (whatNext: string) => {
@@ -584,7 +585,7 @@ export function DiscussionList({ onClose }: DiscussionListProps) {
               sx={actionButtonProps}
               title={t.close}
               onClick={onClose}
-              disabled={anyChangedRef.current || adding}
+              disabled={anyChanged || adding}
             >
               <CloseIcon />
             </IconButton>
diff --git a/src/renderer/src/components/Discussions/DiscussionPanel.tsx b/src/renderer/src/components/Discussions/DiscussionPanel.tsx
index cd963de7..feade363 100644
--- a/src/renderer/src/components/Discussions/DiscussionPanel.tsx
+++ b/src/renderer/src/components/Discussions/DiscussionPanel.tsx
@@ -15,6 +15,10 @@ import { useOrbitData } from '../../hoc/useOrbitData';
 import { useDiscussionCount } from '../../crud/useDiscussionCount';
 import { discussionListSelector } from '../../selector';
 import { useMobile } from '../../utils/useMobile';
+import {
+  documentHasVerticalScrollbar,
+  measureScrollbarWidth,
+} from '../../utils/getScrollbarWidth';
 
 /** Sits just above PassageDetailMobileLayout footer: border + pt + compact row + pb + safe area, plus small gap. */
 const discussionFabBottomDetailMobile =
@@ -43,13 +47,31 @@ export default function DiscussionPanel() {
   const [windowWidth, setWindowWidth] = useState(
     typeof window === 'undefined' ? discussionSize.width : window.innerWidth
   );
+  const [scrollbarWidth, setScrollbarWidth] = useState(0);
+  const cachedScrollbarWidthRef = useMemo(
+    () => (typeof document !== 'undefined' ? measureScrollbarWidth() : 0),
+    []
+  );
+
   useEffect(() => {
     if (typeof window === 'undefined') return;
-    const handleResize = () => setWindowWidth(window.innerWidth);
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  const panelWidth = Math.min(discussionSize.width, windowWidth);
+    const updateLayout = () => {
+      setWindowWidth(window.innerWidth);
+      setScrollbarWidth(
+        documentHasVerticalScrollbar() ? cachedScrollbarWidthRef : 0
+      );
+    };
+    updateLayout();
+    window.addEventListener('resize', updateLayout);
+    return () => window.removeEventListener('resize', updateLayout);
+  }, [cachedScrollbarWidthRef]);
+
+  const panelWidth = isMobile
+    ? Math.min(discussionSize.width, windowWidth)
+    : Math.min(
+        discussionSize.width,
+        Math.max(0, windowWidth - scrollbarWidth)
+      );
   const getDiscussionCount = useDiscussionCount({
     mediafiles,
     discussions,
@@ -73,6 +95,11 @@ export default function DiscussionPanel() {
           minWidth: 0,
           boxSizing: 'border-box',
           justifyContent: 'center',
+          ...(isMobile
+            ? {}
+            : {
+                marginRight: `${scrollbarWidth}px`,
+              }),
         }}
       >
         <Grid container direction="column" sx={{ minWidth: 0, width: '100%' }}>
diff --git a/src/renderer/src/components/MediaRecord.tsx b/src/renderer/src/components/MediaRecord.tsx
index 3ba08a94..1816b753 100644
--- a/src/renderer/src/components/MediaRecord.tsx
+++ b/src/renderer/src/components/MediaRecord.tsx
@@ -80,6 +80,7 @@ interface IProps {
   onProgress?: (progress: number) => void;
   onDuration?: (duration: number) => void;
   hideToolbar?: boolean;
+  hideSegmentControls?: boolean;
   hasRecording?: boolean;
   isStopLogic?: boolean;
   showSize?: boolean;
@@ -136,6 +137,7 @@ function MediaRecord(props: IProps) {
     onProgress,
     onDuration,
     hideToolbar,
+    hideSegmentControls,
     width,
     keepItSmall,
     hasRecording,
@@ -600,6 +602,7 @@ function MediaRecord(props: IProps) {
         onDuration={onDuration}
         controlsRef={controlsRef}
         hideToolbar={hideToolbar}
+        hideSegmentControls={hideSegmentControls}
         hideControls={hideControls}
         segments={segments}
         reload={gotTheBlob}
diff --git a/src/renderer/src/components/usePaneWidth.ts b/src/renderer/src/components/usePaneWidth.ts
index 8e3c3283..e2a77566 100644
--- a/src/renderer/src/components/usePaneWidth.ts
+++ b/src/renderer/src/components/usePaneWidth.ts
@@ -1,14 +1,20 @@
 import { useContext, useEffect, useRef, useState } from 'react';
 import { PassageDetailContext } from '../context/PassageDetailContext';
 import { debounce } from '@mui/material';
+import {
+  documentHasVerticalScrollbar,
+  measureScrollbarWidth,
+} from '../utils/getScrollbarWidth';
 
 export const usePaneWidth = () => {
   const { discussionSize, discussOpen, setDiscussionSize } =
     useContext(PassageDetailContext).state;
   const [paneWidth, setPaneWidth] = useState(0);
   const [width, setWidth] = useState(window.innerWidth);
+  const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const widthRef = useRef(window.innerWidth);
   const discussionSizeRef = useRef(discussionSize);
+  const cachedScrollbarWidthRef = useRef(0);
 
   const setDimensions = () => {
     // Always use actual window width - let components adapt to available space
@@ -26,6 +32,13 @@ export const usePaneWidth = () => {
         width: newDiscWidth, //should we be smarter here?
         height: newDiscHeight,
       });
+
+    if (!cachedScrollbarWidthRef.current) {
+      cachedScrollbarWidthRef.current = measureScrollbarWidth();
+    }
+    setScrollbarWidth(
+      documentHasVerticalScrollbar() ? cachedScrollbarWidthRef.current : 0
+    );
   };
 
   useEffect(() => {
@@ -46,10 +59,11 @@ export const usePaneWidth = () => {
     let newPaneWidth = widthRef.current;
     if (discussOpen) {
       newPaneWidth -= discussionSize.width;
+      newPaneWidth -= scrollbarWidth;
     }
     newPaneWidth = Math.max(0, newPaneWidth);
     setPaneWidth(newPaneWidth);
-  }, [discussionSize, width, discussOpen]);
+  }, [discussionSize, width, discussOpen, scrollbarWidth]);
 
-  return { paneWidth, width };
+  return { paneWidth, width, scrollbarWidth };
 };
diff --git a/src/renderer/src/utils/getScrollbarWidth.ts b/src/renderer/src/utils/getScrollbarWidth.ts
new file mode 100644
index 00000000..7bb4efdb
--- /dev/null
+++ b/src/renderer/src/utils/getScrollbarWidth.ts
@@ -0,0 +1,26 @@
+/** Measure the OS/browser vertical scrollbar width (0 if element not in DOM). */
+export function measureScrollbarWidth(): number {
+  if (typeof document === 'undefined') return 0;
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll';
+  // @ts-expect-error msOverflowStyle is IE-specific
+  outer.style.msOverflowStyle = 'scrollbar';
+  document.body.appendChild(outer);
+
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  outer.parentNode?.removeChild(outer);
+  return scrollbarWidth;
+}
+
+/** True when the document has a vertical scrollbar. */
+export function documentHasVerticalScrollbar(): boolean {
+  if (typeof document === 'undefined') return false;
+  return (
+    document.documentElement.scrollHeight >
+    document.documentElement.clientHeight
+  );
+}
diff --git a/src/renderer/src/utils/index.ts b/src/renderer/src/utils/index.ts
index b83718df..58cf2cd2 100644
--- a/src/renderer/src/utils/index.ts
+++ b/src/renderer/src/utils/index.ts
@@ -26,6 +26,7 @@ export * from './updateXml';
 export * from './useInterval';
 export * from './validateEmail';
 export * from './waitForIt';
+export * from './getScrollbarWidth';
 export * from './lookupBook';
 export * from './refMatch';
 export * from './localUserKey';

From 90e406cf7c38a02b3ac64a77cb7916ecbc721251 Mon Sep 17 00:00:00 2001
From: Greg Trihus <gtryus@gmail.com>
Date: Fri, 29 May 2026 12:07:09 -0500
Subject: [PATCH 2/3] Enhance DiscussionCard to manage audio comment state with
 improved handling for pending audio uploads. Introduced a ref for
 canSaveRecording to track its state and updated logic to wait for audio
 comment blob readiness before saving.

---
 .../components/Discussions/DiscussionCard.tsx | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/Discussions/DiscussionCard.tsx b/src/renderer/src/components/Discussions/DiscussionCard.tsx
index 7e2679e3..87918b8d 100644
--- a/src/renderer/src/components/Discussions/DiscussionCard.tsx
+++ b/src/renderer/src/components/Discussions/DiscussionCard.tsx
@@ -60,7 +60,12 @@ import {
 } from '../../crud/useArtifactCategory';
 import { LightTooltip, StageReport } from '../../control';
 import { PassageDetailContext } from '../../context/PassageDetailContext';
-import { removeExtension, startEnd, useWaitForRemoteQueue } from '../../utils';
+import {
+  removeExtension,
+  startEnd,
+  useWaitForRemoteQueue,
+  waitForIt,
+} from '../../utils';
 import { useOrgWorkflowSteps } from '../../crud/useOrgWorkflowSteps';
 import { NewDiscussionToolId, NewCommentToolId } from './DiscussionList';
 import { SaveInfo, UnsavedContext } from '../../context/UnsavedContext';
@@ -277,9 +282,14 @@ export const DiscussionCard = (props: IProps) => {
   const [comment, setComment] = useState('');
   const commentMediaId = useRef<string | undefined>(undefined);
   const [canSaveRecording, setCanSaveRecording] = useState(false);
+  const canSaveRecordingRef = useRef(false);
   const [hasAudioDraft, setHasAudioDraft] = useState(false);
   const { userIsAdmin } = useRole();
 
+  useEffect(() => {
+    canSaveRecordingRef.current = canSaveRecording;
+  }, [canSaveRecording]);
+
   const CommentAuthor = (comment: CommentD) =>
     getMentorAuthor(comment.attributes.visible) ??
     related(comment, 'creatorUser') ??
@@ -786,7 +796,24 @@ export const DiscussionCard = (props: IProps) => {
     //if there is an audio comment, start the upload
     if (cardSavingRef.current) return;
     cardSavingRef.current = true;
-    if (canSaveRecording && !commentMediaId.current) {
+    const hasPendingAudio =
+      (canSaveRecording || hasAudioDraft) && !commentMediaId.current;
+    if (hasPendingAudio) {
+      // hasAudioDraft is set on pause before canSaveRecording; MediaRecord
+      // completes save immediately if startSave runs without a blob.
+      if (hasAudioDraft && !canSaveRecordingRef.current) {
+        try {
+          await waitForIt(
+            'audio comment blob ready',
+            () => canSaveRecordingRef.current,
+            () => false,
+            30
+          );
+        } catch {
+          cardSavingRef.current = false;
+          return;
+        }
+      }
       startSave(NewCommentToolId);
       //we'll do the rest in afterUpload
       return;

From 6ecd8b4362ea930c970987fe7dc4f519fd18be6f Mon Sep 17 00:00:00 2001
From: Greg Trihus <gtryus@gmail.com>
Date: Fri, 29 May 2026 12:07:09 -0500
Subject: [PATCH 3/3] Refactor PassageDetailGrids, getScrollbarWidth and
 DiscussionPanel

- to remove dynamic scrollbar width calculation and update state destructuring to include discussOpen
- recalculate measureScrollbarWidth
---
 .../Discussions/DiscussionPanel.tsx           | 23 +++++---
 .../PassageDetail/PassageDetailGrids.tsx      | 55 ++-----------------
 src/renderer/src/utils/getScrollbarWidth.ts   | 18 +++---
 3 files changed, 29 insertions(+), 67 deletions(-)

diff --git a/src/renderer/src/components/Discussions/DiscussionPanel.tsx b/src/renderer/src/components/Discussions/DiscussionPanel.tsx
index feade363..85747759 100644
--- a/src/renderer/src/components/Discussions/DiscussionPanel.tsx
+++ b/src/renderer/src/components/Discussions/DiscussionPanel.tsx
@@ -1,4 +1,11 @@
-import { useContext, useEffect, useMemo, useState } from 'react';
+import {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 import { shallowEqual, useSelector } from 'react-redux';
 import {
@@ -48,23 +55,25 @@ export default function DiscussionPanel() {
     typeof window === 'undefined' ? discussionSize.width : window.innerWidth
   );
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
-  const cachedScrollbarWidthRef = useMemo(
-    () => (typeof document !== 'undefined' ? measureScrollbarWidth() : 0),
-    []
-  );
+  const cachedScrollbarWidthRef = useRef(0);
+  useLayoutEffect(() => {
+    if (typeof document !== 'undefined') {
+      cachedScrollbarWidthRef.current = measureScrollbarWidth();
+    }
+  }, []);
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
     const updateLayout = () => {
       setWindowWidth(window.innerWidth);
       setScrollbarWidth(
-        documentHasVerticalScrollbar() ? cachedScrollbarWidthRef : 0
+        documentHasVerticalScrollbar() ? cachedScrollbarWidthRef.current : 0
       );
     };
     updateLayout();
     window.addEventListener('resize', updateLayout);
     return () => window.removeEventListener('resize', updateLayout);
-  }, [cachedScrollbarWidthRef]);
+  }, []);
 
   const panelWidth = isMobile
     ? Math.min(discussionSize.width, windowWidth)
diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx
index 66607076..efdeefc8 100644
--- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx
+++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx
@@ -6,7 +6,7 @@ import React, {
   Suspense,
 } from 'react';
 import { useGlobal } from '../../context/useGlobal';
-import { Grid, debounce, Paper, Box, SxProps, Stack } from '@mui/material';
+import { Grid, Paper, Box, SxProps, Stack } from '@mui/material';
 
 import { HeadHeight } from '../../App';
 import { PassageDetailContext } from '../../context/PassageDetailContext';
@@ -80,7 +80,7 @@ const PassageDetailGrids = () => {
 
   const [memory] = useGlobal('memory');
   const ctx = useContext(PassageDetailContext);
-  const { currentstep, orgWorkflowSteps, mediafileId, sectionArr, isBoldWorkflow } =
+  const { currentstep, orgWorkflowSteps, mediafileId, sectionArr, isBoldWorkflow, discussOpen } =
     ctx.state;
 
   const { tool, settings } = useStepTool(currentstep);
@@ -90,56 +90,9 @@ const PassageDetailGrids = () => {
     [settings]
   );
   const t = useSelector(toolSelector, shallowEqual) as IToolStrings;
-  const { paneWidth, width } = usePaneWidth();
+  const { paneWidth, width, scrollbarWidth } = usePaneWidth();
   const { isMobile } = useMobile();
 
-  const scrollbarWidthRef = React.useRef(0);
-
-  // Calculate scrollbar width dynamically
-  const getScrollbarWidth = () => {
-    // Create a temporary div to measure scrollbar width
-    const outer = document.createElement('div');
-    outer.style.visibility = 'hidden';
-    outer.style.overflow = 'scroll';
-    // @ts-ignore - msOverflowStyle is a Microsoft-specific property for old IE
-    outer.style.msOverflowStyle = 'scrollbar';
-    document.body.appendChild(outer);
-
-    const inner = document.createElement('div');
-    outer.appendChild(inner);
-
-    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-
-    outer.parentNode?.removeChild(outer);
-    return scrollbarWidth;
-  };
-
-  // Detect vertical scrollbar and calculate its width
-  useEffect(() => {
-    // Pre-calculate scrollbar width once (it's constant per browser/OS)
-    const cachedScrollbarWidth = getScrollbarWidth();
-
-    const checkScrollbar = () => {
-      // Check if document body has vertical scrollbar
-      const hasScrollbar =
-        document.documentElement.scrollHeight >
-        document.documentElement.clientHeight;
-
-      // Use cached scrollbar width only if scrollbar exists
-      scrollbarWidthRef.current = hasScrollbar ? cachedScrollbarWidth : 0;
-    };
-
-    checkScrollbar();
-    const handleResize = debounce(() => {
-      checkScrollbar();
-    }, 200);
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
   const artifactId = useMemo(() => {
     const id = stepSettingsParsed?.artifactTypeId as string | undefined;
     if (id)
@@ -408,7 +361,7 @@ const PassageDetailGrids = () => {
                         0,
                         paneWidth -
                           MAGIC_NUMBER_THAT_MAKES_IT_FIT -
-                          scrollbarWidthRef.current
+                          (discussOpen ? 0 : scrollbarWidth)
                       )}
                       artifactTypeId={artifactId}
                     />
diff --git a/src/renderer/src/utils/getScrollbarWidth.ts b/src/renderer/src/utils/getScrollbarWidth.ts
index 7bb4efdb..c4ad455d 100644
--- a/src/renderer/src/utils/getScrollbarWidth.ts
+++ b/src/renderer/src/utils/getScrollbarWidth.ts
@@ -1,19 +1,19 @@
 /** Measure the OS/browser vertical scrollbar width (0 if element not in DOM). */
 export function measureScrollbarWidth(): number {
-  if (typeof document === 'undefined') return 0;
+  if (typeof document === 'undefined' || !document.body) return 0;
   const outer = document.createElement('div');
   outer.style.visibility = 'hidden';
   outer.style.overflow = 'scroll';
   // @ts-expect-error msOverflowStyle is IE-specific
   outer.style.msOverflowStyle = 'scrollbar';
-  document.body.appendChild(outer);
-
-  const inner = document.createElement('div');
-  outer.appendChild(inner);
-
-  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  outer.parentNode?.removeChild(outer);
-  return scrollbarWidth;
+  try {
+    document.body.appendChild(outer);
+    const inner = document.createElement('div');
+    outer.appendChild(inner);
+    return outer.offsetWidth - inner.offsetWidth;
+  } finally {
+    outer.parentNode?.removeChild(outer);
+  }
 }
 
 /** True when the document has a vertical scrollbar. */