From ba9315023acdf2e9f091e1101e15c752edae6fae Mon Sep 17 00:00:00 2001
From: Phong Lam <phong@mystenlabs.com>
Date: Wed, 25 Oct 2023 15:35:41 -0700
Subject: [PATCH] change default for cards

---
 .../transactions/ProgTxnBlockCard.tsx         |  9 +++++----
 .../InputsCard.tsx                            |  7 +------
 .../TransactionsCard.tsx                      |  4 ----
 .../src/ui/collapsible/CollapsibleCard.tsx    | 19 +++++++++++++++----
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx b/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
index 180cf8328438de..93f284d5fa7705 100644
--- a/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
+++ b/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
@@ -10,7 +10,7 @@ import { CollapsibleCard } from '~/ui/collapsible/CollapsibleCard';
 interface ProgrammableTxnBlockCardProps {
 	items: ReactNode[];
 	itemsLabel: string;
-	defaultItemsToShow: number;
+	defaultItemsToShow?: number;
 	noExpandableList?: boolean;
 	count?: number;
 	initialClose?: boolean;
@@ -19,20 +19,21 @@ interface ProgrammableTxnBlockCardProps {
 export function ProgrammableTxnBlockCard({
 	items,
 	itemsLabel,
-	defaultItemsToShow,
 	noExpandableList,
 	count,
 	initialClose,
+	defaultItemsToShow,
 }: ProgrammableTxnBlockCardProps) {
 	if (!items?.length) {
 		return null;
 	}
 
 	const cardTitle = count ? `${count} ${itemsLabel}` : itemsLabel;
+	const itemsToShow = defaultItemsToShow || items.length;
 
 	return (
 		<CollapsibleCard collapsible initialClose={initialClose} title={cardTitle}>
-			<ExpandableList items={items} defaultItemsToShow={defaultItemsToShow} itemsLabel={itemsLabel}>
+			<ExpandableList items={items} defaultItemsToShow={itemsToShow} itemsLabel={itemsLabel}>
 				<div
 					className={clsx(
 						'flex flex-col gap-6 overflow-y-auto',
@@ -42,7 +43,7 @@ export function ProgrammableTxnBlockCard({
 					{noExpandableList ? <>{items}</> : <ExpandableListItems />}
 				</div>
 
-				{items.length > defaultItemsToShow && (
+				{items.length > itemsToShow && (
 					<div className="mt-6">
 						<ExpandableListControl />
 					</div>
diff --git a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/InputsCard.tsx b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/InputsCard.tsx
index 21fc31bb61a22c..261bc7401c8a73 100644
--- a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/InputsCard.tsx
+++ b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/InputsCard.tsx
@@ -9,21 +9,18 @@ import { AddressLink, ObjectLink } from '~/ui/InternalLink';
 import { CollapsibleSection } from '~/ui/collapsible/CollapsibleSection';
 
 const REGEX_NUMBER = /^\d+$/;
-const DEFAULT_ITEMS_TO_SHOW = 10;
 
 interface InputsCardProps {
 	inputs: SuiCallArg[];
 }
 
 export function InputsCard({ inputs }: InputsCardProps) {
-	const defaultOpen = inputs.length < DEFAULT_ITEMS_TO_SHOW;
-
 	if (!inputs?.length) {
 		return null;
 	}
 
 	const expandableItems = inputs.map((input, index) => (
-		<CollapsibleSection key={index} title={`Input ${index}`} defaultOpen={defaultOpen}>
+		<CollapsibleSection key={index} title={`Input ${index}`} defaultOpen>
 			<div data-testid="inputs-card-content" className="flex flex-col gap-2">
 				{Object.entries(input).map(([key, value]) => {
 					let renderValue;
@@ -71,8 +68,6 @@ export function InputsCard({ inputs }: InputsCardProps) {
 			items={expandableItems}
 			itemsLabel={inputs.length > 1 ? 'Inputs' : 'Input'}
 			count={inputs.length}
-			defaultItemsToShow={DEFAULT_ITEMS_TO_SHOW}
-			noExpandableList={defaultOpen}
 		/>
 	);
 }
diff --git a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/TransactionsCard.tsx b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/TransactionsCard.tsx
index 0718a9ff00075a..158515956f348e 100644
--- a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/TransactionsCard.tsx
+++ b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/TransactionsCard.tsx
@@ -7,8 +7,6 @@ import { Transaction } from './Transaction';
 import { ProgrammableTxnBlockCard } from '~/components/transactions/ProgTxnBlockCard';
 import { CollapsibleSection } from '~/ui/collapsible/CollapsibleSection';
 
-const DEFAULT_ITEMS_TO_SHOW = 5;
-
 interface TransactionsCardProps {
 	transactions: SuiTransaction[];
 }
@@ -36,8 +34,6 @@ export function TransactionsCard({ transactions }: TransactionsCardProps) {
 			items={expandableItems}
 			itemsLabel={transactions.length > 1 ? 'Transactions' : 'Transaction'}
 			count={transactions.length}
-			defaultItemsToShow={DEFAULT_ITEMS_TO_SHOW}
-			noExpandableList={transactions.length < DEFAULT_ITEMS_TO_SHOW}
 		/>
 	);
 }
diff --git a/apps/explorer/src/ui/collapsible/CollapsibleCard.tsx b/apps/explorer/src/ui/collapsible/CollapsibleCard.tsx
index 1e76f0f34d318b..9660e046c6edb0 100644
--- a/apps/explorer/src/ui/collapsible/CollapsibleCard.tsx
+++ b/apps/explorer/src/ui/collapsible/CollapsibleCard.tsx
@@ -27,8 +27,12 @@ function CollapsibleCardHeader({ open, size, title, collapsible }: CollapsibleCa
 		<div
 			className={clsx(
 				'flex w-full justify-between',
-				open && size === 'md' && 'pb-6',
-				open && size === 'sm' && 'pb-4.5',
+				size === 'md' ? 'px-6' : 'px-4',
+				size === 'sm' && 'pb-4.5',
+				open && size === 'md' && 'pb-6 pt-7',
+				open && size === 'sm' && 'pt-4.5',
+				!open && size === 'md' && 'py-7',
+				!open && size === 'sm' && 'py-4.5',
 			)}
 		>
 			{typeof title === 'string' ? (
@@ -84,11 +88,18 @@ export function CollapsibleCard({
 				<Collapsible.Root
 					open={open}
 					onOpenChange={setOpen}
-					className={clsx(size === 'md' ? 'px-6 py-7' : 'px-4 py-4.5')}
+					className={clsx(
+						!title && size === 'md' && 'pt-7',
+						!title && size === 'sm' && 'pt-4.5',
+						open && size === 'md' && 'pb-7',
+						open && size === 'sm' && 'pb-4.5',
+					)}
 				>
 					<CollapsibleCardHeader open={open} size={size} title={title} collapsible={collapsible} />
 
-					<Collapsible.Content>{children}</Collapsible.Content>
+					<div className={clsx(size === 'md' ? 'px-6' : 'px-4')}>
+						<Collapsible.Content>{children}</Collapsible.Content>
+					</div>
 				</Collapsible.Root>
 
 				{footer && (