From 827345a07a3d2348abc63e5215e57184024078d8 Mon Sep 17 00:00:00 2001
From: Wout Stiens <71498452+StiensWout@users.noreply.github.com>
Date: Wed, 2 Sep 2026 08:48:12 +0200
Subject: [PATCH] fix(web): model info button opens its details on click
 (#9177)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../settings/ProviderModelsSection.tsx           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/settings/ProviderModelsSection.tsx b/apps/web/src/components/settings/ProviderModelsSection.tsx
index a4e8b7e7a9a7da7d27a237ab23b436df69c68885..007abea2b844826cabca8e089536bfe614636db2 100644
--- a/apps/web/src/components/settings/ProviderModelsSection.tsx
+++ b/apps/web/src/components/settings/ProviderModelsSection.tsx
@@ -23,6 +23,7 @@ import { sortModelsForProviderInstance } from "../../modelOrdering";
 import { MAX_CUSTOM_MODEL_LENGTH } from "../../modelSelection";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
+import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
 /**
@@ -244,8 +245,11 @@ export function ProviderModelsSection({
                   {model.name}
                 </span>
                 {hasDetails ? (
-                  <Tooltip>
-                    <TooltipTrigger
+                  <Popover>
+                    <PopoverTrigger
+                      openOnHover
+                      delay={250}
+                      closeDelay={100}
                       render={
                         <Button
                           size="icon-micro"
@@ -256,8 +260,8 @@ export function ProviderModelsSection({
                       }
                     >
                       <InfoIcon className="size-3" />
-                    </TooltipTrigger>
-                    <TooltipPopup side="top" className="max-w-56">
+                    </PopoverTrigger>
+                    <PopoverPopup side="top" tooltipStyle className="max-w-56">
                       <div className="space-y-1">
                         <code className="block text-[11px] text-foreground">{model.slug}</code>
                         {capLabels.length > 0 ? (
@@ -270,8 +274,8 @@ export function ProviderModelsSection({
                           </div>
                         ) : null}
                       </div>
-                    </TooltipPopup>
-                  </Tooltip>
+                    </PopoverPopup>
+                  </Popover>
                 ) : null}
                 {isHidden ? (
                   <span className="text-[10px] text-muted-foreground">hidden</span>
-- 
2.54.0