Repository: aipotheosis-labs/aci
File: frontend/src/app/apps/[appName]/page.tsx (TypeScript)

Code before:
        toast.error(`Failed to configure app. Please try again.`);
      }
      return false;
    }
  };

  return (
    <div>
      <div className="m-4 flex items-center justify-between">
        <div>
          {app && (
            <div className="flex items-center gap-4">
              <div className="relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-lg">
                <Image
                  src={app?.logo ?? ""}
                  alt={`${app?.display_name} logo`}
                  fill
                  className="object-contain"
                />
              </div>
              <div>
                <h1 className="text-2xl font-bold">{app.display_name}</h1>
                <IdDisplay id={app.name} />
                <div className="mt-2 max-w-3xl text-sm text-muted-foreground">
                  {app.description}
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="flex items-center gap-2">
          {app && (
            <ConfigureAppPopup
              name={app.name}
              supported_security_schemes={app.supported_security_schemes ?? {}}
              configureApp={configureApp}
              logo={app.logo}
            >
              <Button
                className="bg-primary text-white hover:bg-primary/90"
                disabled={appConfig !== null}
              >
                {appConfig ? "Configured" : "Configure App"}
              </Button>
            </ConfigureAppPopup>
          )}
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="cursor-pointer">
                <BsQuestionCircle className="h-4 w-4 text-muted-foreground" />
              </span>

Review comment (bug):
We actually want the description to be under the app icon instead of on its right.

<img width="1314" alt="Screenshot 2025-05-26 at 11 47 07 PM" src="https://github.com/user-attachments/assets/90ecc6a7-0faf-4ec2-9f82-780000bad266" />

Here's a reference implementation:
```html
          {app && (
            <div>
              <div className="flex items-center gap-4">
                <div className="relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-lg">
                  <Image
                    src={app?.logo ?? ""}
                    alt={`${app?.display_name} logo`}
                    fill
                    className="object-contain"
                  />
                </div>
                <div>
                  <h1 className="text-2xl font-bold">{app.display_name}</h1>
                  <IdDisplay id={app.name} />
                </div>
              </div>
              <div className="mt-2 max-w-4xl text-sm text-muted-foreground">
                {app.description}
              </div>
            </div>
          )}
```

Could you update it accordingly?

Code after:
        toast.error(`Failed to configure app. Please try again.`);
      }
      return false;
    }
  };

  return (
    <div>
      <div className="m-4 flex items-center justify-between">
        <div>
          {app && (
            <div className="flex flex-col gap-4">
              <div className="flex items-center gap-4">
                <div className="relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-lg">
                  <Image
                    src={app?.logo ?? ""}
                    alt={`${app?.display_name} logo`}
                    fill
                    className="object-contain"
                  />
                </div>
                <div>
                  <h1 className="text-2xl font-bold">{app.display_name}</h1>
                  <IdDisplay id={app.name} />
                </div>
              </div>
              <div className="max-w-3xl text-sm text-muted-foreground">
                {app.description}
              </div>
            </div>
          )}
        </div>
        <div className="flex items-center gap-2">
          {app && (
            <ConfigureAppPopup
              name={app.name}
              supported_security_schemes={app.supported_security_schemes ?? {}}
              configureApp={configureApp}
              logo={app.logo}
            >
              <Button
                className="bg-primary text-white hover:bg-primary/90"
                disabled={appConfig !== null}
              >
                {appConfig ? "Configured" : "Configure App"}
              </Button>
            </ConfigureAppPopup>
          )}
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="cursor-pointer">