Skip to content

Commit 7a46cb8

Browse files
nicholasgriffintnnicholasgriffintn
committed
chore: style tweaks
1 parent ad830f0 commit 7a46cb8

File tree

2 files changed

+62
-58
lines changed

2 files changed

+62
-58
lines changed

‎apps/app/src/components/ConversationThread/ChatInput/ModelSelector/ModelsList.tsx‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -148,66 +148,70 @@ export function ModelsList({
148148

149149
return (
150150
<div className="overflow-hidden rounded-lg border border-zinc-200/70 bg-white/60 dark:border-zinc-700/70 dark:bg-zinc-900/50">
151-
<div className="flex min-h-[320px]">
152-
<div className="w-16 border-r border-zinc-200/70 px-1.5 py-2 dark:border-zinc-700/70 sm:w-20 sm:px-2">
153-
<div className="max-h-[320px] space-y-1 overflow-y-auto overflow-x-hidden">
154-
{providerEntries.map((providerEntry) => {
155-
const isFeaturedProvider =
156-
providerEntry.key === FEATURED_PROVIDER_KEY;
157-
const isSelected = selectedProvider === providerEntry.key;
158-
return (
159-
<button
160-
key={providerEntry.key}
161-
type="button"
162-
onClick={() => {
163-
onInfoHoverEnd?.();
164-
setSelectedProvider(providerEntry.key);
165-
}}
166-
className={cn(
167-
"flex w-full flex-col items-center gap-1 rounded-lg border px-1 py-2 text-[10px] transition-colors sm:text-[11px]",
168-
isSelected
169-
? "border-fuchsia-300 bg-fuchsia-50 text-fuchsia-700 dark:border-fuchsia-500/40 dark:bg-fuchsia-950/30 dark:text-fuchsia-200"
170-
: "border-transparent text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:bg-zinc-800",
171-
)}
172-
aria-pressed={isSelected}
173-
title={providerEntry.label}
174-
>
175-
{isFeaturedProvider ? (
176-
<Sparkles className="h-4 w-4" />
177-
) : (
178-
<ModelIcon
179-
modelName={providerEntry.label}
180-
provider={providerEntry.key}
181-
size={18}
182-
mono={mono}
183-
/>
184-
)}
185-
<span className="line-clamp-1 w-full text-center">
186-
{isFeaturedProvider
187-
? "Featured"
188-
: providerEntry.label.split(" ")[0]}
189-
</span>
190-
<span className="rounded-full bg-zinc-200 px-1.5 py-0.5 text-[10px] text-zinc-700 dark:bg-zinc-700 dark:text-zinc-200">
191-
{providerEntry.models.length}
192-
</span>
193-
</button>
194-
);
195-
})}
151+
<div className="flex max-h-[min(60vh,400px)] min-h-[280px] sm:max-h-[420px] sm:min-h-[320px]">
152+
<div className="flex w-20 flex-col border-r border-zinc-200/70 dark:border-zinc-700/70 sm:w-24 md:w-28">
153+
<div className="flex-1 overflow-y-auto overflow-x-hidden px-1.5 py-2 sm:px-2">
154+
<div className="space-y-1">
155+
{providerEntries.map((providerEntry) => {
156+
const isFeaturedProvider =
157+
providerEntry.key === FEATURED_PROVIDER_KEY;
158+
const isSelected = selectedProvider === providerEntry.key;
159+
return (
160+
<button
161+
key={providerEntry.key}
162+
type="button"
163+
onClick={() => {
164+
onInfoHoverEnd?.();
165+
setSelectedProvider(providerEntry.key);
166+
}}
167+
className={cn(
168+
"flex w-full flex-col items-center gap-1 rounded-lg border px-1 py-2 text-[10px] transition-colors sm:text-[11px]",
169+
isSelected
170+
? "border-fuchsia-300 bg-fuchsia-50 text-fuchsia-700 dark:border-fuchsia-500/40 dark:bg-fuchsia-950/30 dark:text-fuchsia-200"
171+
: "border-transparent text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:bg-zinc-800",
172+
)}
173+
aria-pressed={isSelected}
174+
title={providerEntry.label}
175+
>
176+
{isFeaturedProvider ? (
177+
<Sparkles className="h-4 w-4" />
178+
) : (
179+
<ModelIcon
180+
modelName={providerEntry.label}
181+
provider={providerEntry.key}
182+
size={18}
183+
mono={mono}
184+
/>
185+
)}
186+
<span className="line-clamp-1 w-full text-center">
187+
{isFeaturedProvider
188+
? "Featured"
189+
: providerEntry.label.split(" ")[0]}
190+
</span>
191+
<span className="rounded-full bg-zinc-200 px-1.5 py-0.5 text-[10px] text-zinc-700 dark:bg-zinc-700 dark:text-zinc-200">
192+
{providerEntry.models.length}
193+
</span>
194+
</button>
195+
);
196+
})}
197+
</div>
196198
</div>
197199
</div>
198200

199-
<div className="min-w-0 flex-1 p-2">
200-
<div className="mb-2 flex items-center justify-between gap-2 px-1">
201-
<h4 className="text-sm font-semibold text-zinc-900 whitespace-normal break-words dark:text-zinc-100">
202-
{selectedProviderEntry?.label || "Models"}
203-
</h4>
204-
<span className="flex-shrink-0 text-xs text-zinc-500 dark:text-zinc-400">
205-
{visibleModels.length} model
206-
{visibleModels.length === 1 ? "" : "s"}
207-
</span>
201+
<div className="flex min-w-0 flex-1 flex-col">
202+
<div className="flex-shrink-0 border-b border-zinc-200/70 px-3 py-2 dark:border-zinc-700/70">
203+
<div className="flex items-center justify-between gap-2">
204+
<h4 className="text-sm font-semibold text-zinc-900 whitespace-normal break-words dark:text-zinc-100">
205+
{selectedProviderEntry?.label || "Models"}
206+
</h4>
207+
<span className="flex-shrink-0 text-xs text-zinc-500 dark:text-zinc-400">
208+
{visibleModels.length} model
209+
{visibleModels.length === 1 ? "" : "s"}
210+
</span>
211+
</div>
208212
</div>
209213
<div
210-
className="max-h-[320px] overflow-x-hidden overflow-y-auto pr-1"
214+
className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-2"
211215
onMouseLeave={() => onInfoHoverEnd?.()}
212216
>
213217
<fieldset role="listbox" aria-label="Available models">

‎apps/app/src/components/ConversationThread/ChatInput/ModelSelector/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -589,7 +589,7 @@ export const ModelSelector = ({
589589
ref={dropdownRef}
590590
open
591591
onKeyDown={handleKeyDown}
592-
className="absolute bottom-full left-0 z-50 mb-1 w-[min(94vw,660px)] max-w-[660px] rounded-xl border border-zinc-200 bg-off-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900"
592+
className="absolute bottom-full left-0 z-50 mb-1 w-[min(96vw,600px)] max-w-[600px] rounded-xl border border-zinc-200 bg-off-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900 sm:w-[min(90vw,660px)] sm:max-w-[660px]"
593593
aria-label="Model selection dialog"
594594
>
595595
{selectedTab !== "auto" && (
@@ -766,8 +766,8 @@ export const ModelSelector = ({
766766
</TabsContent>
767767

768768
<TabsContent value="models">
769-
<div className="space-y-3 pt-2">
770-
<div className="rounded-lg border border-zinc-200/70 p-2 dark:border-zinc-700/70">
769+
<div className="space-y-3">
770+
<div>
771771
<div className="flex items-center justify-between">
772772
<div className="text-xs text-zinc-500 dark:text-zinc-400">
773773
Model Source:

0 commit comments

Comments
 (0)