From c8bd477406c9c7dcd2cfb9fa0dbe47ee02b9066a Mon Sep 17 00:00:00 2001
From: John Oshalusi <john.oshalusi@iohk.io>
Date: Thu, 13 Feb 2025 15:52:39 +0100
Subject: [PATCH] fix: expand simple asset input to occupy 100% width

---
 .../asset-input/amount-input.component.tsx       | 10 ++++++++--
 .../asset-input/asset-input.stories.tsx          | 16 +++++++++++++++-
 .../asset-input/simple-asset-input.component.tsx |  2 ++
 .../asset-input/simple-asset-input.css.ts        |  4 ++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/design-system/asset-input/amount-input.component.tsx b/src/design-system/asset-input/amount-input.component.tsx
index f0c5826..e8feec4 100644
--- a/src/design-system/asset-input/amount-input.component.tsx
+++ b/src/design-system/asset-input/amount-input.component.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import cn from 'classnames';
+
 import { Box } from '../box';
 
 import * as cx from './amount-input.css';
@@ -11,6 +13,8 @@ interface Props {
   value?: string;
   id: string;
   testId?: string;
+  className?: string;
+  inputClassName?: string;
 }
 
 export const AmountInput = ({
@@ -19,11 +23,13 @@ export const AmountInput = ({
   value,
   id,
   testId,
+  className,
+  inputClassName,
 }: Readonly<Props>): JSX.Element => {
   return (
-    <Box className={cx.amountInputSizer} data-value={value}>
+    <Box className={cn(cx.amountInputSizer, className)} data-value={value}>
       <input
-        className={cx.amountInput[alignment]}
+        className={cn(cx.amountInput[alignment], inputClassName)}
         value={value}
         size={1}
         onChange={({ target }): void => onChange?.(target.value)}
diff --git a/src/design-system/asset-input/asset-input.stories.tsx b/src/design-system/asset-input/asset-input.stories.tsx
index 7074664..cc8c4c1 100644
--- a/src/design-system/asset-input/asset-input.stories.tsx
+++ b/src/design-system/asset-input/asset-input.stories.tsx
@@ -38,6 +38,17 @@ const AssetInputMainComponents = (): JSX.Element => (
   </Variants.Row>
 );
 
+const SimpleAssetInputMainComponents = (): JSX.Element => (
+  <Variants.Row>
+    <Variants.Cell>
+      <SimpleAssetInput
+        state={validState('1')}
+        balanceLabel="Balance Available"
+      />
+    </Variants.Cell>
+  </Variants.Row>
+);
+
 const AssetInputUIStates = (): JSX.Element => (
   <>
     <Variants.Row>
@@ -94,9 +105,12 @@ export const Overview = (): JSX.Element => (
       <Divider my="$64" />
 
       <Section title="Main components">
-        <ColorSchemaTable headers={['Rest']}>
+        <ColorSchemaTable headers={['Asset Input']}>
           <AssetInputMainComponents />
         </ColorSchemaTable>
+        <ColorSchemaTable headers={['Simple Asset Input']}>
+          <SimpleAssetInputMainComponents />
+        </ColorSchemaTable>
       </Section>
 
       <Divider my="$64" />
diff --git a/src/design-system/asset-input/simple-asset-input.component.tsx b/src/design-system/asset-input/simple-asset-input.component.tsx
index 2bedfe3..a5f1932 100644
--- a/src/design-system/asset-input/simple-asset-input.component.tsx
+++ b/src/design-system/asset-input/simple-asset-input.component.tsx
@@ -31,6 +31,8 @@ export const SimpleAssetInput = ({
           onAmountChange?.(state.asset, value);
         }}
         testId={testId}
+        className={cx.amountInputContainer}
+        inputClassName={cx.amountInput}
       />
     </Box>
     <Box className={cx.balance}>
diff --git a/src/design-system/asset-input/simple-asset-input.css.ts b/src/design-system/asset-input/simple-asset-input.css.ts
index 3bc2d4e..649d80b 100644
--- a/src/design-system/asset-input/simple-asset-input.css.ts
+++ b/src/design-system/asset-input/simple-asset-input.css.ts
@@ -20,6 +20,10 @@ export const root = style([
 
 export const amountBox = style({ gridArea: 'amount' });
 
+export const amountInputContainer = style({ display: 'flex' });
+
+export const amountInput = style({ width: '100%' });
+
 export const balance = style({ gridArea: 'balance' });
 
 export const error = style({ gridArea: 'error' });