diff --git a/studio/frontend/src/features/settings/components/usage-examples.tsx b/studio/frontend/src/features/settings/components/usage-examples.tsx
index a8f8ce31a6..0e68237857 100644
--- a/studio/frontend/src/features/settings/components/usage-examples.tsx
+++ b/studio/frontend/src/features/settings/components/usage-examples.tsx
@@ -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">
diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx
index 63c0a9d388..38002e2f14 100644
--- a/studio/frontend/src/features/settings/settings-dialog.tsx
+++ b/studio/frontend/src/features/settings/settings-dialog.tsx
@@ -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>
diff --git a/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx b/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
index ac9ec40543..6cbd28f14d 100644
--- a/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
@@ -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} />
             ))}