Repository: Infisical/infisical
File: frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx (TypeScript)

Code before:
  const { t } = useTranslation();
  const { currentProject } = useProject();
  const [selectedTab, setSelectedTab] = useState("rule-based");

  const { data: v1AlertsData } = useListWorkspacePkiAlerts({
    projectId: currentProject?.id || ""
  });

  const hasV1Alerts = v1AlertsData?.alerts && v1AlertsData.alerts.length > 0;

  return (
    <div className="mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: "Alerting" })}</title>
      </Helmet>
      <div className="mx-auto mb-6 w-full max-w-8xl">
        <PageHeader
          scope={ProjectType.CertificateManager}
          title={
            <div className="flex items-center gap-x-2">
              Alerting
              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/alerting" />
            </div>
          }
          description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
        />
        <ProjectPermissionCan
          renderGuardBanner
          I={ProjectPermissionActions.Read}
          a={ProjectPermissionSub.PkiAlerts}
        >
          {!hasV1Alerts ? (
            <div>
              <PkiAlertsV2Page hideContainer />
            </div>
          ) : (
            <Tabs orientation="vertical" value={selectedTab} onValueChange={setSelectedTab}>
              <TabList>
                <Tab variant="project" value="rule-based">
                  Certificate Alerts
                </Tab>
                <Tab variant="project" value="legacy">
                  Collection Alerts (Legacy)
                </Tab>
              </TabList>

              <TabPanel value="rule-based">
                <PkiAlertsV2Page />
              </TabPanel>

              <TabPanel value="legacy">

Review comment (suggestion):
the format of this title got a little messed up; should be inline with icon and maybe add a little margin to the top of the badge (looks a little off center)
<img width="1484" height="316" alt="CleanShot 2025-12-17 at 10 25 32@2x" src="https://github.com/user-attachments/assets/fcab13a8-4b4f-4a13-9450-b647277529ea" />


Code after:
  const { t } = useTranslation();
  const { currentProject } = useProject();
  const [selectedTab, setSelectedTab] = useState("rule-based");

  const { data: v1AlertsData } = useListWorkspacePkiAlerts({
    projectId: currentProject?.id || ""
  });

  const hasV1Alerts = v1AlertsData?.alerts && v1AlertsData.alerts.length > 0;

  return (
    <div className="mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: "Alerting" })}</title>
      </Helmet>
      <div className="mx-auto mb-6 w-full max-w-8xl">
        <PageHeader
          scope={ProjectType.CertificateManager}
          title={
            <span className="inline-flex items-center gap-x-2">
              Alerting
              <span className="mt-0.5">
                <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/alerting" />
              </span>
            </span>
          }
          description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
        />
        <ProjectPermissionCan
          renderGuardBanner
          I={ProjectPermissionActions.Read}
          a={ProjectPermissionSub.PkiAlerts}
        >
          {!hasV1Alerts ? (
            <div>
              <PkiAlertsV2Page hideContainer />
            </div>
          ) : (
            <Tabs orientation="vertical" value={selectedTab} onValueChange={setSelectedTab}>
              <TabList>
                <Tab variant="project" value="rule-based">
                  Certificate Alerts
                </Tab>
                <Tab variant="project" value="legacy">
                  Collection Alerts (Legacy)
                </Tab>
              </TabList>

              <TabPanel value="rule-based">
                <PkiAlertsV2Page />
              </TabPanel>