mobile friendly

1 files changed, 63 insertions, 60 deletions

diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 20c5d6cf7..d8c1644b1 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -100,75 +100,78 @@ export function PaytoWireTransferForm({
           autoCapitalize="none"
           autoCorrect="off"
         >
-          <p>
-            <label for="iban">{i18n.str`Receiver IBAN:`}</label>&nbsp;
+          <label for="iban">{i18n.str`Receiver IBAN:`}</label>&nbsp;
+          <input
+            ref={ref}
+            type="text"
+            id="iban"
+            name="iban"
+            value={iban ?? ""}
+            placeholder="CC0123456789"
+            required
+            pattern={ibanRegex}
+            onInput={(e): void => {
+              setIban(e.currentTarget.value);
+            }}
+          />
+          <ShowInputErrorLabel
+            message={errorsWire?.iban}
+            isDirty={iban !== undefined}
+          />
+          <label for="subject">{i18n.str`Transfer subject:`}</label>&nbsp;
+          <input
+            type="text"
+            name="subject"
+            id="subject"
+            placeholder="subject"
+            value={subject ?? ""}
+            required
+            onInput={(e): void => {
+              setSubject(e.currentTarget.value);
+            }}
+          />
+          <ShowInputErrorLabel
+            message={errorsWire?.subject}
+            isDirty={subject !== undefined}
+          />
+          <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
+          <div style={{ width: "max-content", display: "flex" }}>
             <input
-              ref={ref}
               type="text"
-              id="iban"
-              name="iban"
-              value={iban ?? ""}
-              placeholder="CC0123456789"
-              required
-              pattern={ibanRegex}
-              onInput={(e): void => {
-                setIban(e.currentTarget.value);
+              readonly
+              class="currency-indicator"
+              size={limit.currency.length}
+              maxLength={limit.currency.length}
+              tabIndex={-1}
+              style={{
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                borderRight: 0,
               }}
+              value={limit.currency}
             />
-            <br />
-            <ShowInputErrorLabel
-              message={errorsWire?.iban}
-              isDirty={iban !== undefined}
-            />
-            <br />
-            <label for="subject">{i18n.str`Transfer subject:`}</label>&nbsp;
             <input
-              type="text"
-              name="subject"
-              id="subject"
-              placeholder="subject"
-              value={subject ?? ""}
+              type="number"
+              name="amount"
+              id="amount"
+              placeholder="amount"
               required
+              style={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: 0,
+                width: 150,
+              }}
+              value={amount ?? ""}
               onInput={(e): void => {
-                setSubject(e.currentTarget.value);
+                setAmount(e.currentTarget.value);
               }}
             />
-            <br />
-            <ShowInputErrorLabel
-              message={errorsWire?.subject}
-              isDirty={subject !== undefined}
-            />
-            <br />
-            <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
-            <div style={{ width: "max-content" }}>
-              <input
-                type="text"
-                readonly
-                class="currency-indicator"
-                size={limit.currency.length}
-                maxLength={limit.currency.length}
-                tabIndex={-1}
-                value={limit.currency}
-              />
-              &nbsp;
-              <input
-                type="number"
-                name="amount"
-                id="amount"
-                placeholder="amount"
-                required
-                value={amount ?? ""}
-                onInput={(e): void => {
-                  setAmount(e.currentTarget.value);
-                }}
-              />
-            </div>
-            <ShowInputErrorLabel
-              message={errorsWire?.amount}
-              isDirty={amount !== undefined}
-            />
-          </p>
-
+          </div>
+          <ShowInputErrorLabel
+            message={errorsWire?.amount}
+            isDirty={amount !== undefined}
+          />
           <p style={{ display: "flex", justifyContent: "space-between" }}>
             <input
               type="submit"