From 9a976a8be5be7c2d67693995b851539f5c13e709 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sat, 24 May 2025 23:09:46 +0200
Subject: [PATCH] improve responsiveness

---
 src/components/BaseInput.jsx | 15 ++++++++-------
 src/components/LoanPanel.jsx |  4 ++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/BaseInput.jsx b/src/components/BaseInput.jsx
index 88384f5..e21f0d2 100644
--- a/src/components/BaseInput.jsx
+++ b/src/components/BaseInput.jsx
@@ -4,23 +4,24 @@ const BaseInput = ({
   onChangeCallback,
   placeholder = "",
   suffix,
-  inputMode,
   inputWidth = "w-[60px]",
   inputClassName = "",
 }) => {
   return (
-    <div className="flex">
-      <label className="my-1" htmlFor="">
+    <div className="flex md:flex-row flex-col items-center my-1">
+      <label className="" htmlFor="">
         {label}
+      </label>
+      <div className="flex mx-auto">
         <input
-          className={`ml-3 ${inputWidth} bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 ${inputClassName}`}
+          className={`md:ml-3 my-0 ${inputWidth} bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 ${inputClassName}`}
           value={value}
           placeholder={placeholder}
           onChange={onChangeCallback}
         />
-      </label>
-      <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-        {suffix}
+        <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
+          {suffix}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/LoanPanel.jsx b/src/components/LoanPanel.jsx
index fd06c68..55f448a 100644
--- a/src/components/LoanPanel.jsx
+++ b/src/components/LoanPanel.jsx
@@ -57,8 +57,8 @@ const LoanPanel = () => {
 
   return (
     <>
-      <div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
-        <form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
+      <div className=" mb p-5 bg-gray-50 rounded-3xl border border-gray-400">
+        <form className="flex flex-col justify-end md:items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
           <LoanPrincipalInput
             onChangeCallback={handleLoanPrincipalChange}
             loanPrincipal={loanPrincipal}