ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Studio: API settings overflow with long Colab URLs (#5286)

Browse source 
* fix: API settings overflow with long Colab URLs

* fix: gentle wrapping for API usage snippets

---------

Co-authored-by: Roland Tannous <115670425+rolandtannous@users.noreply.github.com>
This commit is contained in:
Lee Jackson 2026-05-07 10:17:23 +01:00 • committed by GitHub
commit 4ab096970d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
studio/frontend/src/features/settings/components/usage-examples.tsx
View file

@ -96,11 +96,11 @@ export function UsageExamples() {
};
return (
<section className="flex flex-col">
<section className="flex min-w-0 max-w-full flex-col">
<h2 className="mb-2 text-sm font-semibold text-foreground">Usage examples</h2>
<div className="overflow-hidden rounded-lg border border-border bg-muted/20">
<div className="flex items-center justify-between border-b border-border px-2 py-1.5">
<div className="flex items-center gap-0.5">
<div className="min-w-0 max-w-full overflow-hidden rounded-lg border border-border bg-muted/20">
<div className="flex min-w-0 items-center justify-between gap-2 border-b border-border px-2 py-1.5">
<div className="flex min-w-0 items-center gap-0.5">
{TABS.map((t) => {
const active = lang === t.id;
return (
@ -134,7 +134,7 @@ export function UsageExamples() {
{copied ? "Copied" : "Copy"}
</button>
</div>
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed text-foreground">
<pre className="max-w-full overflow-x-auto whitespace-pre-wrap break-words p-3 font-mono text-[11px] leading-relaxed text-foreground">
{snippets[lang]}
</pre>
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-border px-3 py-2 text-[11px] text-muted-foreground">

2
studio/frontend/src/features/settings/settings-dialog.tsx
View file

@ -163,7 +163,7 @@ export function SettingsDialog() {
>
<HugeiconsIcon icon={Cancel01Icon} className="size-4" />
</button>
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-6">
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-6">
{renderTab(activeTab)}
</div>
</main>

8
studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
View file

@ -61,8 +61,8 @@ export function ApiKeysTab() {
};
return (
<div className="flex flex-col gap-6">
<header className="flex flex-col gap-1">
<div className="flex min-w-0 max-w-full flex-col gap-6">
<header className="flex min-w-0 flex-col gap-1">
<h1 className="text-lg font-semibold font-heading">API</h1>
<p className="text-xs text-muted-foreground">
Access Unsloth programmatically via the OpenAI-compatible API.{" "}
@ -111,7 +111,7 @@ export function ApiKeysTab() {
)}
</AnimatePresence>
<section className="flex flex-col">
<section className="flex min-w-0 flex-col">
<h2 className="mb-2 text-sm font-semibold text-foreground">Access tokens</h2>
{error ? (
<div className="rounded-md border border-destructive/20 bg-destructive/5 p-3 text-xs text-destructive">
@ -131,7 +131,7 @@ export function ApiKeysTab() {
No API access yet.
</p>
) : (
<div className="flex flex-col">
<div className="flex min-w-0 flex-col">
{keys.map((k) => (
<ApiKeyRow key={k.id} apiKey={k} onRevoke={setRevokeTarget} />
))}