Merge pull request #366 from captableinc/fix/misalignment

fix: company form misalignment in xs-sm screen
captableinc · May 31, 2024 · b000aac · b000aac
2 parents 111bcc6 + 59682e1
commit b000aac
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/components/onboarding/company-form.tsx b/src/components/onboarding/company-form.tsx
@@ -192,7 +192,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  return (
  <Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
- <div className="col-span-full flex items-center gap-x-8">
+ <div className="col-span-full space-y-2 flex flex-col sm:flex-row items-center gap-x-3 sm:gap-x-8">
  <Avatar className="h-20 w-20 rounded">
  <AvatarImage src={imageUrl || "/placeholders/company.svg"} />
  </Avatar>
@@ -223,7 +223,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  <div className="grid gap-2">
  <div className="grid gap-5">
  {type === "onboarding" && (
- <div className="grid grid-cols-2 gap-4">
+ <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <FormField
  control={form.control}
  name="user.name"
@@ -254,7 +254,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  </div>
  )}
 
- <div className="grid grid-cols-3 gap-4">
+ <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <FormField
  control={form.control}
  name="company.name"
@@ -307,7 +307,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  Please provide your company{`'`}s address.
  </p>
 
- <div className="grid grid-cols-2 gap-4">
+ <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <FormField
  control={form.control}
  name="company.streetAddress"
@@ -337,7 +337,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  />
  </div>
 
- <div className="grid grid-cols-3 gap-4">
+ <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <FormField
  control={form.control}
  name="company.state"
@@ -402,7 +402,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  certificate of incorporation will come in handy here.
  </p>
 
- <div className="grid grid-cols-2 gap-4">
+ <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <FormField
  control={form.control}
  name="company.incorporationType"
@@ -450,7 +450,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  />
  </div>
 
- <div className="grid grid-cols-2 gap-4">
+ <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <FormField
  control={form.control}
  name="company.incorporationCountry"