@remit/ui 0.0.111 → 0.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "type": "module",
   "files": [
     "src"

package/src/components/reading-pane.stories.tsx

@@ -203,6 +203,27 @@ export const ExpandedRowComposed: StoryObj<typeof ExpandedMessage> = {
 	),
 };
 
+/** The chevron beside the sender is the disclosure control, not a picture of
+ *  one: press it to put the message away and press the row to bring it back.
+ *  Reclaiming the space a long message takes is what a reader aims at it for. */
+export const RowDisclosure: StoryObj<typeof ExpandedMessage> = {
+	render: function RowDisclosureRender() {
+		const [expanded, setExpanded] = useState(true);
+		return (
+			<div className="max-w-3xl border border-line">
+				{expanded ? (
+					<ExpandedMessage
+						message={row}
+						onHeaderClick={() => setExpanded(false)}
+					/>
+				) : (
+					<CollapsedMessage message={row} onClick={() => setExpanded(true)} />
+				)}
+			</div>
+		);
+	},
+};
+
 /** The app owns the fetch and hands the row its state back; so does this. */
 const ThreadAttachments = () => {
 	const [rows, setRows] = useState<AttachmentItem[]>([

package/src/components/reading-pane.tsx

@@ -184,7 +184,23 @@ export function ExpandedMessage({
 			)}
 		>
 			<div className="flex items-start gap-3">
-				<ChevronDown className="mt-1 size-3.5 shrink-0 text-fg-subtle" />
+				{/* The chevron is the disclosure control, not a picture of one: it is
+				    what a reader aims at to put a message away, so it carries the
+				    collapse itself rather than sitting beside the sender block that
+				    does. */}
+				{onHeaderClick ? (
+					<button
+						type="button"
+						onClick={onHeaderClick}
+						aria-expanded={true}
+						aria-label="Collapse message"
+						className="mt-1 shrink-0 text-fg-subtle transition-colors hover:text-fg"
+					>
+						<ChevronDown className="size-3.5" />
+					</button>
+				) : (
+					<ChevronDown className="mt-1 size-3.5 shrink-0 text-fg-subtle" />
+				)}
 				<Avatar name={message.fromName} email={message.fromEmail} size="md" />
 				<div className="min-w-0 flex-1">
 					{onHeaderClick ? (