From c5cf416633e4b12daf21b4ea230d52f2dae03f32 Mon Sep 17 00:00:00 2001
From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com>
Date: Thu, 30 Jul 2026 14:37:35 +0530
Subject: [PATCH] feat(app): fix composer attachment fades (#38547)

---
 .../components/prompt-input/attachments.css   | 44 +++++++++++++++++++
 .../src/v2/components/prompt-input/index.tsx  | 15 +++++--
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 packages/session-ui/src/v2/components/prompt-input/attachments.css

diff --git a/packages/session-ui/src/v2/components/prompt-input/attachments.css b/packages/session-ui/src/v2/components/prompt-input/attachments.css
new file mode 100644
index 00000000000..3b8173d105e
--- /dev/null
+++ b/packages/session-ui/src/v2/components/prompt-input/attachments.css
@@ -0,0 +1,44 @@
+@keyframes prompt-input-v2-attachments-fade-left {
+  from {
+    visibility: hidden;
+  }
+  to {
+    visibility: visible;
+  }
+}
+
+@keyframes prompt-input-v2-attachments-fade-right {
+  from {
+    visibility: visible;
+  }
+  to {
+    visibility: hidden;
+  }
+}
+
+[data-component="prompt-input-v2-attachments"] {
+  timeline-scope: --prompt-input-v2-attachments-scroll;
+
+  [data-slot^="prompt-attachments-fade-"] {
+    visibility: hidden;
+  }
+}
+
+@supports (animation-timeline: --prompt-input-v2-attachments-scroll) and
+  (timeline-scope: --prompt-input-v2-attachments-scroll) {
+  [data-component="prompt-input-v2-attachments"] [data-slot="prompt-attachments-scroll"] {
+    scroll-timeline: --prompt-input-v2-attachments-scroll x;
+  }
+
+  [data-component="prompt-input-v2-attachments"] [data-slot="prompt-attachments-fade-left"] {
+    animation: prompt-input-v2-attachments-fade-left linear both;
+    animation-timeline: --prompt-input-v2-attachments-scroll;
+    animation-range: 0 0.1px;
+  }
+
+  [data-component="prompt-input-v2-attachments"] [data-slot="prompt-attachments-fade-right"] {
+    animation: prompt-input-v2-attachments-fade-right linear both;
+    animation-timeline: --prompt-input-v2-attachments-scroll;
+    animation-range: calc(100% - 1.1px) calc(100% - 1px);
+  }
+}
diff --git a/packages/session-ui/src/v2/components/prompt-input/index.tsx b/packages/session-ui/src/v2/components/prompt-input/index.tsx
index c09b5a1b5f9..0989e2ef655 100644
--- a/packages/session-ui/src/v2/components/prompt-input/index.tsx
+++ b/packages/session-ui/src/v2/components/prompt-input/index.tsx
@@ -21,6 +21,7 @@ import type {
   PromptInputV2Suggestion,
 } from "./types"
 import type { PromptInputV2Interaction, PromptInputV2SelectControl } from "./interaction"
+import "./attachments.css"
 
 export type {
   PromptInputV2Attachment,
@@ -107,7 +108,7 @@ export function PromptInputV2(props: PromptInputV2Props) {
       <form
         data-component="prompt-input-v2"
         data-dock-border-underlay={props.borderUnderlay ? "v2" : undefined}
-        class="group/prompt-input relative min-h-[96px] w-full rounded-xl bg-v2-background-bg-base"
+        class="group/prompt-input relative min-h-[96px] w-full overflow-clip rounded-xl bg-v2-background-bg-base"
         classList={{
           "shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay,
           "border border-v2-icon-icon-info border-dashed": state.drag === "active",
@@ -378,7 +379,7 @@ export function PromptInputV2Attachments(props: {
 }) {
   return (
     <Show when={props.attachments.length > 0 || (props.comments?.length ?? 0) > 0}>
-      <div data-slot="prompt-attachments" class="relative">
+      <div data-component="prompt-input-v2-attachments" data-slot="prompt-attachments" class="relative">
         <div
           data-slot="prompt-attachments-scroll"
           class="flex flex-nowrap gap-2 overflow-x-auto no-scrollbar px-2 pt-2 pb-1"
@@ -444,8 +445,14 @@ export function PromptInputV2Attachments(props: {
             )}
           </For>
         </div>
-        <div class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-base),transparent)]" />
-        <div class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-base),transparent)]" />
+        <div
+          data-slot="prompt-attachments-fade-left"
+          class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-base),transparent)]"
+        />
+        <div
+          data-slot="prompt-attachments-fade-right"
+          class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-base),transparent)]"
+        />
       </div>
     </Show>
   )