From 49b086cef3025f66740d7db8cada6e0038fd6fc3 Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Mon, 29 Dec 2025 09:24:13 +0530
Subject: [PATCH] fix: make model selector label responsive to panel width
 (#443)

* fix: make model selector label responsive to panel width

* Apply suggestion from @DayuanJiang

Co-authored-by: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>

---------

Co-authored-by: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
---
 components/model-selector.tsx | 303 ++++++++++++++++++++--------------
 1 file changed, 179 insertions(+), 124 deletions(-)

diff --git a/components/model-selector.tsx b/components/model-selector.tsx
index c67759b..370d40c 100644
--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -8,7 +8,7 @@ import {
     Server,
     Settings2,
 } from "lucide-react"
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import {
     ModelSelectorContent,
     ModelSelectorEmpty,
@@ -114,134 +114,189 @@ export function ModelSelector({
         ? `${selectedModel.modelId} ${dict.modelConfig.clickToChange}`
         : `${dict.modelConfig.usingServerDefault} ${dict.modelConfig.clickToChange}`
 
+    const wrapperRef = useRef<HTMLDivElement | null>(null)
+    const [showLabel, setShowLabel] = useState(true)
+
+    // Threshold (px) under which we hide the label (tweak as needed)
+    const HIDE_THRESHOLD = 240
+    const SHOW_THRESHOLD = 260
+    useEffect(() => {
+        const el = wrapperRef.current
+        if (!el) return
+
+        const target = el.parentElement ?? el
+
+        const ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width
+                setShowLabel((prev) => {
+                    // if currently showing and width dropped below hide threshold -> hide
+                    if (prev && width <= HIDE_THRESHOLD) return false
+                    // if currently hidden and width rose above show threshold -> show
+                    if (!prev && width >= SHOW_THRESHOLD) return true
+                    // otherwise keep previous state (hysteresis)
+                    return prev
+                })
+            }
+        })
+
+        ro.observe(target)
+
+        const initialWidth = target.getBoundingClientRect().width
+        setShowLabel(initialWidth >= SHOW_THRESHOLD)
+
+        return () => ro.disconnect()
+    }, [])
+
     return (
-        <ModelSelectorRoot open={open} onOpenChange={setOpen}>
-            <ModelSelectorTrigger asChild>
-                <ButtonWithTooltip
-                    tooltipContent={tooltipContent}
-                    variant="ghost"
-                    size="sm"
-                    disabled={disabled}
-                    className="hover:bg-accent gap-1.5 h-8 max-w-[180px] px-2"
-                >
-                    <Bot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-                    <span className="text-xs truncate">
-                        {selectedModel
-                            ? selectedModel.modelId
-                            : dict.modelConfig.default}
-                    </span>
-                    <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
-                </ButtonWithTooltip>
-            </ModelSelectorTrigger>
-            <ModelSelectorContent title={dict.modelConfig.selectModel}>
-                <ModelSelectorInput
-                    placeholder={dict.modelConfig.searchModels}
-                />
-                <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
-                    <ModelSelectorEmpty>
-                        {displayModels.length === 0 && models.length > 0
-                            ? dict.modelConfig.noVerifiedModels
-                            : dict.modelConfig.noModelsFound}
-                    </ModelSelectorEmpty>
+        <div ref={wrapperRef} className="inline-block">
+            <ModelSelectorRoot open={open} onOpenChange={setOpen}>
+                <ModelSelectorTrigger asChild>
+                    <ButtonWithTooltip
+                        tooltipContent={tooltipContent}
+                        variant="ghost"
+                        size="sm"
+                        disabled={disabled}
+                        className={cn(
+                            "hover:bg-accent gap-1.5 h-8 px-2 transition-all duration-150 ease-in-out",
+                            !showLabel && "px-1.5 justify-center",
+                        )}
+                        // accessibility: expose label to screen readers
+                        aria-label={tooltipContent}
+                    >
+                        <Bot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                        {/* show/hide visible label based on measured width */}
+                        {showLabel ? (
+                            <span className="text-xs truncate">
+                                {selectedModel
+                                    ? selectedModel.modelId
+                                    : dict.modelConfig.default}
+                            </span>
+                        ) : (
+                            // Keep an sr-only label for screen readers when hidden
+                            <span className="sr-only">
+                                {selectedModel
+                                    ? selectedModel.modelId
+                                    : dict.modelConfig.default}
+                            </span>
+                        )}
+                        <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                    </ButtonWithTooltip>
+                </ModelSelectorTrigger>
 
-                    {/* Server Default Option */}
-                    <ModelSelectorGroup heading={dict.modelConfig.default}>
-                        <ModelSelectorItem
-                            value="__server_default__"
-                            onSelect={handleSelect}
-                            className={cn(
-                                "cursor-pointer",
-                                !selectedModelId && "bg-accent",
-                            )}
-                        >
-                            <Check
+                <ModelSelectorContent title={dict.modelConfig.selectModel}>
+                    <ModelSelectorInput
+                        placeholder={dict.modelConfig.searchModels}
+                    />
+                    <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+                        <ModelSelectorEmpty>
+                            {displayModels.length === 0 && models.length > 0
+                                ? dict.modelConfig.noVerifiedModels
+                                : dict.modelConfig.noModelsFound}
+                        </ModelSelectorEmpty>
+
+                        {/* Server Default Option */}
+                        <ModelSelectorGroup heading={dict.modelConfig.default}>
+                            <ModelSelectorItem
+                                value="__server_default__"
+                                onSelect={handleSelect}
                                 className={cn(
-                                    "mr-2 h-4 w-4",
-                                    !selectedModelId
-                                        ? "opacity-100"
-                                        : "opacity-0",
+                                    "cursor-pointer",
+                                    !selectedModelId && "bg-accent",
                                 )}
-                            />
-                            <Server className="mr-2 h-4 w-4 text-muted-foreground" />
-                            <ModelSelectorName>
-                                {dict.modelConfig.serverDefault}
-                            </ModelSelectorName>
-                        </ModelSelectorItem>
-                    </ModelSelectorGroup>
-
-                    {/* Configured Models by Provider */}
-                    {Array.from(groupedModels.entries()).map(
-                        ([
-                            providerLabel,
-                            { provider, models: providerModels },
-                        ]) => (
-                            <ModelSelectorGroup
-                                key={providerLabel}
-                                heading={providerLabel}
                             >
-                                {providerModels.map((model) => (
-                                    <ModelSelectorItem
-                                        key={model.id}
-                                        value={model.modelId}
-                                        onSelect={() => handleSelect(model.id)}
-                                        className="cursor-pointer"
-                                    >
-                                        <Check
-                                            className={cn(
-                                                "mr-2 h-4 w-4",
-                                                selectedModelId === model.id
-                                                    ? "opacity-100"
-                                                    : "opacity-0",
-                                            )}
-                                        />
-                                        <ModelSelectorLogo
-                                            provider={
-                                                PROVIDER_LOGO_MAP[provider] ||
-                                                provider
-                                            }
-                                            className="mr-2"
-                                        />
-                                        <ModelSelectorName>
-                                            {model.modelId}
-                                        </ModelSelectorName>
-                                        {model.validated !== true && (
-                                            <span
-                                                title={
-                                                    dict.modelConfig
-                                                        .unvalidatedModelWarning
-                                                }
-                                            >
-                                                <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
-                                            </span>
-                                        )}
-                                    </ModelSelectorItem>
-                                ))}
-                            </ModelSelectorGroup>
-                        ),
-                    )}
+                                <Check
+                                    className={cn(
+                                        "mr-2 h-4 w-4",
+                                        !selectedModelId
+                                            ? "opacity-100"
+                                            : "opacity-0",
+                                    )}
+                                />
+                                <Server className="mr-2 h-4 w-4 text-muted-foreground" />
+                                <ModelSelectorName>
+                                    {dict.modelConfig.serverDefault}
+                                </ModelSelectorName>
+                            </ModelSelectorItem>
+                        </ModelSelectorGroup>
 
-                    {/* Configure Option */}
-                    <ModelSelectorSeparator />
-                    <ModelSelectorGroup>
-                        <ModelSelectorItem
-                            value="__configure__"
-                            onSelect={handleSelect}
-                            className="cursor-pointer"
-                        >
-                            <Settings2 className="mr-2 h-4 w-4" />
-                            <ModelSelectorName>
-                                {dict.modelConfig.configureModels}
-                            </ModelSelectorName>
-                        </ModelSelectorItem>
-                    </ModelSelectorGroup>
-                    {/* Info text */}
-                    <div className="px-3 py-2 text-xs text-muted-foreground border-t">
-                        {showUnvalidatedModels
-                            ? dict.modelConfig.allModelsShown
-                            : dict.modelConfig.onlyVerifiedShown}
-                    </div>
-                </ModelSelectorList>
-            </ModelSelectorContent>
-        </ModelSelectorRoot>
+                        {/* Configured Models by Provider */}
+                        {Array.from(groupedModels.entries()).map(
+                            ([
+                                providerLabel,
+                                { provider, models: providerModels },
+                            ]) => (
+                                <ModelSelectorGroup
+                                    key={providerLabel}
+                                    heading={providerLabel}
+                                >
+                                    {providerModels.map((model) => (
+                                        <ModelSelectorItem
+                                            key={model.id}
+                                            value={model.modelId}
+                                            onSelect={() =>
+                                                handleSelect(model.id)
+                                            }
+                                            className="cursor-pointer"
+                                        >
+                                            <Check
+                                                className={cn(
+                                                    "mr-2 h-4 w-4",
+                                                    selectedModelId === model.id
+                                                        ? "opacity-100"
+                                                        : "opacity-0",
+                                                )}
+                                            />
+                                            <ModelSelectorLogo
+                                                provider={
+                                                    PROVIDER_LOGO_MAP[
+                                                        provider
+                                                    ] || provider
+                                                }
+                                                className="mr-2"
+                                            />
+                                            <ModelSelectorName>
+                                                {model.modelId}
+                                            </ModelSelectorName>
+                                            {model.validated !== true && (
+                                                <span
+                                                    title={
+                                                        dict.modelConfig
+                                                            .unvalidatedModelWarning
+                                                    }
+                                                >
+                                                    <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
+                                                </span>
+                                            )}
+                                        </ModelSelectorItem>
+                                    ))}
+                                </ModelSelectorGroup>
+                            ),
+                        )}
+
+                        {/* Configure Option */}
+                        <ModelSelectorSeparator />
+                        <ModelSelectorGroup>
+                            <ModelSelectorItem
+                                value="__configure__"
+                                onSelect={handleSelect}
+                                className="cursor-pointer"
+                            >
+                                <Settings2 className="mr-2 h-4 w-4" />
+                                <ModelSelectorName>
+                                    {dict.modelConfig.configureModels}
+                                </ModelSelectorName>
+                            </ModelSelectorItem>
+                        </ModelSelectorGroup>
+                        {/* Info text */}
+                        <div className="px-3 py-2 text-xs text-muted-foreground border-t">
+                            {showUnvalidatedModels
+                                ? dict.modelConfig.allModelsShown
+                                : dict.modelConfig.onlyVerifiedShown}
+                        </div>
+                    </ModelSelectorList>
+                </ModelSelectorContent>
+            </ModelSelectorRoot>
+        </div>
     )
 }