From 9ab08db6a1df86e2921a8815595fb7e38a644830 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Thu, 19 Mar 2026 16:01:31 +0000
Subject: [PATCH] refactor: improve CSS responsiveness

- Replace p-[25px] with p-6 (Tailwind default 24px)
- Remove fixed leading-[30px] from title (let browser handle)
- Remove fixed leading-[22.75px] from card description
- Replace h-10 with min-h-10 on inputs (allows growth)

Co-authored-by: openhands <openhands@all-hands.dev>
---
 .../src/components/features/onboarding/form-input.tsx  |  4 ++--
 .../features/onboarding/information-request-form.tsx   | 10 +++-------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/features/onboarding/form-input.tsx b/frontend/src/components/features/onboarding/form-input.tsx
index e78f94718e..fbc0f3d73e 100644
--- a/frontend/src/components/features/onboarding/form-input.tsx
+++ b/frontend/src/components/features/onboarding/form-input.tsx
@@ -19,13 +19,13 @@ export function FormInput({
 }: FormInputProps) {
   const inputId = `form-input-${id}`;
   const inputClassName =
-    "w-full h-10 rounded border border-t-[#242424] border-[#242424] bg-[#1F1F1F66] px-3 py-2 text-sm text-white placeholder:text-[#8C8C8C] focus:border-white focus:outline-none transition-colors";
+    "w-full min-h-10 rounded border border-[#242424] bg-[#050505] px-3 py-2 text-sm leading-5 text-white placeholder:text-[#8C8C8C] placeholder:leading-5 focus:border-white focus:outline-none transition-colors";
 
   return (
     <div className="flex flex-col gap-1.5 w-full">
       <label
         htmlFor={inputId}
-        className="text-sm font-medium leading-5 text-neutral-400 cursor-pointer"
+        className="text-sm font-medium leading-5 text-[#FAFAFA] cursor-pointer"
       >
         {label}
       </label>
diff --git a/frontend/src/components/features/onboarding/information-request-form.tsx b/frontend/src/components/features/onboarding/information-request-form.tsx
index 202fd399bf..2e1700cf7d 100644
--- a/frontend/src/components/features/onboarding/information-request-form.tsx
+++ b/frontend/src/components/features/onboarding/information-request-form.tsx
@@ -66,9 +66,7 @@ export function InformationRequestForm({
       <div className="w-full flex flex-col items-center gap-4">
         <OpenHandsLogoWhite width={56} height={56} />
         <div className="text-center flex flex-col gap-2">
-          <h1 className="text-2xl font-semibold leading-[30px] text-white">
-            {title}
-          </h1>
+          <h1 className="text-2xl font-semibold text-white">{title}</h1>
           <Text className="text-[#8C8C8C] leading-5">{subtitle}</Text>
         </div>
       </div>
@@ -144,7 +142,7 @@ export function InformationRequestForm({
         <Card
           theme="dark"
           gradient="standard"
-          className="w-full md:w-80 flex-col p-[25px] gap-4"
+          className="w-full md:w-80 flex-col p-6 gap-4"
         >
           <div className="w-10 h-10">
             {isSaas ? (
@@ -156,9 +154,7 @@ export function InformationRequestForm({
           <h3 className="text-xl font-semibold leading-7 text-[#FAFAFA]">
             {cardTitle}
           </h3>
-          <Text className="text-[#8C8C8C] leading-[22.75px]">
-            {cardDescription}
-          </Text>
+          <Text className="text-[#8C8C8C]">{cardDescription}</Text>
         </Card>
       </div>
     </div>