fix: remove spacing from hidden elements + scroll indicator race (#1224)

* fix: remove spacing from hidden elements (#1141)

Move the layout/padding wrapper div inside the conditional render
chain so it only renders when the element is visible. Previously the
outer div with py-2 padding persisted even when
TimeConditionalRender, PositionConditionalRender, or
ConditionsConditionalRender returned null, causing visible gaps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: resolve scroll indicator race condition (#1225)

Use wasAtBottomRef.current (continuously updated by scroll handler)
as the primary check in the MutationObserver callback, falling back
to the prevScrollHeight computation. This prevents the indicator from
briefly appearing when a programmatic scroll and DOM mutation race —
the scroll handler may have already registered "at bottom" even if
prevScrollHeight is stale.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: JamesPHoughton

client/src/Stage.jsx

@@ -73,27 +73,27 @@ export function Stage() {
   };
 
   const renderElement = (element, index) => (
-    <div
+    <TimeConditionalRender
       key={`element_wrapper_${index}`}
-      className={`mx-auto w-full px-4 py-2 ${layoutClassForElement(element)}`}
+      displayTime={element.displayTime}
+      hideTime={element.hideTime}
     >
-      <TimeConditionalRender
-        displayTime={element.displayTime}
-        hideTime={element.hideTime}
+      <PositionConditionalRender
+        showToPositions={element.showToPositions}
+        hideFromPositions={element.hideFromPositions}
       >
-        <PositionConditionalRender
-          showToPositions={element.showToPositions}
-          hideFromPositions={element.hideFromPositions}
-        >
-          <ConditionsConditionalRender conditions={element.conditions}>
+        <ConditionsConditionalRender conditions={element.conditions}>
+          <div
+            className={`mx-auto w-full px-4 py-2 ${layoutClassForElement(element)}`}
+          >
             <Element
               element={element}
               onSubmit={() => player.stage.set("submit", true)}
             />
-          </ConditionsConditionalRender>
-        </PositionConditionalRender>
-      </TimeConditionalRender>
-    </div>
+          </div>
+        </ConditionsConditionalRender>
+      </PositionConditionalRender>
+    </TimeConditionalRender>
   );
 
   const renderDiscussionPage = () => (

client/src/components/scroll/useScrollAwareness.js

@@ -77,9 +77,11 @@ export function useScrollAwareness(containerRef, options = {}) {
                     return;
                 }
 
-                // Check if user WAS at bottom BEFORE content was added
-                // We use prevScrollHeight because that's the height when user last scrolled
-                const wasAtBottom = isAtBottom(
+                // Check if user was at bottom before content was added.
+                // Prefer the ref (continuously updated by scroll handler) over
+                // recomputing from the cached prevScrollHeight, which can be
+                // stale when a programmatic scroll and DOM mutation race.
+                const wasAtBottom = wasAtBottomRef.current || isAtBottom(
                     prevScrollHeight,
                     scrollTop,
                     container.clientHeight,