Repository: supabase/supabase
File: apps/studio/components/interfaces/Connect/ConnectionPanel.tsx (TypeScript)

Code before:
  connectionString,
  ipv4Status,
  notice,
  parameters = [],
  lang = 'bash',
  fileTitle,
  children,
  onCopyCallback,
}: PropsWithChildren<ConnectionPanelProps>) => {
  const { ref: projectRef } = useParams()
  const state = useDatabaseSelectorStateSnapshot()

  const { data: poolingInfo } = useSupavisorConfigurationQuery({ projectRef })
  const poolingConfiguration = poolingInfo?.find((x) => x.identifier === state.selectedDatabaseId)
  const isSessionMode = poolingConfiguration?.pool_mode === 'session'

  const links = ipv4Status.links ?? []

  const isTransactionDedicatedPooler = type === 'transaction' && badge === 'Dedicated Pooler'

  return (
    <div className="relative text-sm flex flex-col gap-5 lg:grid lg:grid-cols-12 w-full">
      <div className="col-span-4 flex flex-col">
        <div className="flex items-center gap-x-2 mb-2">
          <h1 className="text-sm">{title}</h1>
          {!!badge && !isTransactionDedicatedPooler && <Badge>{badge}</Badge>}
        </div>
        <p className="text-sm text-foreground-light mb-4">{description}</p>
        {contentFooter}
      </div>
      <div className="col-span-8 flex flex-col gap-2">
        <div className="flex flex-col gap-2">
          {isTransactionDedicatedPooler && (
            <div className="text-xs flex items-center text-foreground-light">
              Using the Dedicated Pooler:
            </div>
          )}
          <div className="flex flex-col -space-y-px">
            {fileTitle && <CodeBlockFileHeader title={fileTitle} />}
            {type === 'transaction' && isSessionMode ? (
              <Admonition
                showIcon={false}
                type="default"
                className="[&>h5]:text-xs [&>div]:text-xs"
                title="Transaction pooler is unavailable as pool mode is set to Session"
                description="If you'd like to use transaction mode, update your pool mode to Transaction for the connection pooler in your project's Database Settings."
              >
                <Button asChild type="default" className="mt-2">
                  <Link
                    href={`/project/${projectRef}/database/settings#connection-pooler`}
                    className="text-xs text-light hover:text-foreground"

Review comment (suggestion):
removing the `Dedicated pooler` badge next to the title to bring "Using the Dedicated pooler:" closer to the relevant params, to make it clear where the Shared pooler starts at the bottom of the column

<img width="1080" height="703" alt="Image" src="https://github.com/user-attachments/assets/0d853eab-f434-40e5-a1b9-bfdaad510153" />

Code after:
  connectionString,
  ipv4Status,
  notice,
  parameters = [],
  lang = 'bash',
  fileTitle,
  children,
  onCopyCallback,
}: PropsWithChildren<ConnectionPanelProps>) => {
  const { ref: projectRef } = useParams()
  const state = useDatabaseSelectorStateSnapshot()

  const { data: poolingInfo } = useSupavisorConfigurationQuery({ projectRef })
  const poolingConfiguration = poolingInfo?.find((x) => x.identifier === state.selectedDatabaseId)
  const isSessionMode = poolingConfiguration?.pool_mode === 'session'

  const links = ipv4Status.links ?? []

  const isTransactionDedicatedPooler = type === 'transaction' && badge === 'Dedicated Pooler'

  return (
    <div className="relative text-sm flex flex-col gap-5 lg:grid lg:grid-cols-12 w-full">
      <div className="col-span-4 flex flex-col">
        <div className="flex items-center gap-x-2 mb-2">
          <h1 className="text-sm">{title}</h1>
          {!!badge && !isTransactionDedicatedPooler && <Badge>{badge}</Badge>}
        </div>
        <p className="text-sm text-foreground-light mb-4">{description}</p>
        {contentFooter}
      </div>
      <div className="col-span-8 flex flex-col gap-2">
        {isTransactionDedicatedPooler && (
          <div className="text-xs flex items-center text-foreground-light">
            Using the Dedicated Pooler:
          </div>
        )}
        <div className="flex flex-col -space-y-px">
          {fileTitle && <CodeBlockFileHeader title={fileTitle} />}
          {type === 'transaction' && isSessionMode ? (
            <Admonition
              showIcon={false}
              type="default"
              className="[&>h5]:text-xs [&>div]:text-xs"
              title="Transaction pooler is unavailable as pool mode is set to Session"
              description="If you'd like to use transaction mode, update your pool mode to Transaction for the connection pooler in your project's Database Settings."
            >
              <Button asChild type="default" className="mt-2">
                <Link
                  href={`/project/${projectRef}/database/settings#connection-pooler`}
                  className="text-xs text-light hover:text-foreground"
                >