diff --git a/webui/src/components/thread/activity/ThinkingReasoningShell.tsx b/webui/src/components/thread/activity/ThinkingReasoningShell.tsx
index 7825cc0af..c647e8738 100644
--- a/webui/src/components/thread/activity/ThinkingReasoningShell.tsx
+++ b/webui/src/components/thread/activity/ThinkingReasoningShell.tsx
@@ -76,20 +76,34 @@ export function ThinkingReasoningShell({
             : "pointer-events-none grid-rows-[0fr] opacity-0",
         )}
       >
-        <div className="min-h-0 overflow-hidden">
+        <div className="relative min-h-0 overflow-hidden">
           <div
             ref={viewportRef}
             data-testid={expanded ? "agent-activity-scroll" : undefined}
             data-fade-top={fadeTop}
             data-fade-bottom={fadeBottom}
             onScroll={onScroll}
-            className="activity-scroll-fade mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
             aria-hidden={!expanded}
           >
             <div ref={contentRef} className="flex flex-col gap-0.5">
               {children}
             </div>
           </div>
+          {fadeTop ? (
+            <span
+              data-testid="activity-scroll-fade-top"
+              className="pointer-events-none absolute inset-x-0 top-1.5 z-10 h-3.5 bg-gradient-to-b from-background to-transparent"
+              aria-hidden
+            />
+          ) : null}
+          {fadeBottom ? (
+            <span
+              data-testid="activity-scroll-fade-bottom"
+              className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3.5 bg-gradient-to-t from-background to-transparent"
+              aria-hidden
+            />
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/webui/src/globals.css b/webui/src/globals.css
index 6f7febab1..140909a42 100644
--- a/webui/src/globals.css
+++ b/webui/src/globals.css
@@ -681,34 +681,6 @@
     container-type: inline-size;
   }
 
-  /* Soften only the activity edges that have clipped content beyond them. */
-  .activity-scroll-fade[data-fade-top="true"][data-fade-bottom="false"] {
-    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px);
-    mask-image: linear-gradient(to bottom, transparent, #000 14px);
-  }
-
-  .activity-scroll-fade[data-fade-top="false"][data-fade-bottom="true"] {
-    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
-    mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
-  }
-
-  .activity-scroll-fade[data-fade-top="true"][data-fade-bottom="true"] {
-    -webkit-mask-image: linear-gradient(
-      to bottom,
-      transparent,
-      #000 14px,
-      #000 calc(100% - 14px),
-      transparent
-    );
-    mask-image: linear-gradient(
-      to bottom,
-      transparent,
-      #000 14px,
-      #000 calc(100% - 14px),
-      transparent
-    );
-  }
-
   @supports (content-visibility: auto) {
     .thread-render-unit {
       content-visibility: auto;
diff --git a/webui/src/tests/agent-activity-cluster.test.tsx b/webui/src/tests/agent-activity-cluster.test.tsx
index 29f328cce..08ad98331 100644
--- a/webui/src/tests/agent-activity-cluster.test.tsx
+++ b/webui/src/tests/agent-activity-cluster.test.tsx
@@ -288,16 +288,24 @@ describe("AgentActivityCluster", () => {
       });
       expect(scrollport).toHaveAttribute("data-fade-top", "true");
       expect(scrollport).toHaveAttribute("data-fade-bottom", "false");
+      const topFade = screen.getByTestId("activity-scroll-fade-top");
+      expect(scrollport).not.toContainElement(topFade);
+      expect(scrollport).not.toHaveClass("activity-scroll-fade");
+      expect(screen.queryByTestId("activity-scroll-fade-bottom")).not.toBeInTheDocument();
 
       scrollport.scrollTop = 440;
       fireEvent.scroll(scrollport);
       expect(scrollport).toHaveAttribute("data-fade-top", "true");
       expect(scrollport).toHaveAttribute("data-fade-bottom", "true");
+      expect(screen.getByTestId("activity-scroll-fade-top")).toBeInTheDocument();
+      expect(screen.getByTestId("activity-scroll-fade-bottom")).toBeInTheDocument();
 
       scrollport.scrollTop = 0;
       fireEvent.scroll(scrollport);
       expect(scrollport).toHaveAttribute("data-fade-top", "false");
       expect(scrollport).toHaveAttribute("data-fade-bottom", "true");
+      expect(screen.queryByTestId("activity-scroll-fade-top")).not.toBeInTheDocument();
+      expect(screen.getByTestId("activity-scroll-fade-bottom")).toBeInTheDocument();
 
       setScrollGeometry(scrollport, {
         scrollHeight: 100,
@@ -307,6 +315,8 @@ describe("AgentActivityCluster", () => {
       fireEvent.scroll(scrollport);
       expect(scrollport).toHaveAttribute("data-fade-top", "false");
       expect(scrollport).toHaveAttribute("data-fade-bottom", "false");
+      expect(screen.queryByTestId("activity-scroll-fade-top")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("activity-scroll-fade-bottom")).not.toBeInTheDocument();
     } finally {
       raf.restore();
     }