diff --git a/app/javascript/controllers/clipboard_controller.js b/app/javascript/controllers/clipboard_controller.js
index 7e0b1a493d1..b2f9d89472d 100644
--- a/app/javascript/controllers/clipboard_controller.js
+++ b/app/javascript/controllers/clipboard_controller.js
@@ -18,11 +18,21 @@ export default class extends Controller {
   }
 
   showSuccess() {
+    if (!this.hasIconDefaultTarget || !this.hasIconSuccessTarget) return;
+
     this.iconDefaultTarget.classList.add("hidden");
     this.iconSuccessTarget.classList.remove("hidden");
-    setTimeout(() => {
+
+    clearTimeout(this.resetTimeout);
+    this.resetTimeout = setTimeout(() => {
       this.iconDefaultTarget.classList.remove("hidden");
       this.iconSuccessTarget.classList.add("hidden");
+      this.resetTimeout = null;
     }, 3000);
   }
+
+  disconnect() {
+    clearTimeout(this.resetTimeout);
+    this.resetTimeout = null;
+  }
 }
diff --git a/app/views/layouts/settings.html.erb b/app/views/layouts/settings.html.erb
index 49614c2373a..f08fa76a094 100644
--- a/app/views/layouts/settings.html.erb
+++ b/app/views/layouts/settings.html.erb
@@ -6,9 +6,9 @@
       </div>
     </div>
 
-    <main class="grow flex h-full">
-      <div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
-        <div class="grow flex flex-col overflow-y-auto overflow-x-hidden overscroll-contain [-webkit-overflow-scrolling:touch]">
+    <main class="grow flex h-full min-w-0">
+      <div class="relative max-w-4xl mx-auto flex flex-col w-full h-full min-w-0">
+        <div class="grow flex flex-col overflow-y-auto overflow-x-hidden overscroll-contain [-webkit-overflow-scrolling:touch] min-w-0">
           <div class="sticky top-0 z-10 px-3 md:px-10 pt-1.5 md:pt-3 pb-3 bg-surface border-b border-tertiary shrink-0">
             <% if content_for?(:breadcrumbs) %>
               <%= yield :breadcrumbs %>
@@ -16,7 +16,7 @@
               <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
             <% end %>
 
-            <div class="flex items-center justify-between gap-4 mt-1.5 min-h-9">
+            <div class="flex flex-wrap items-center justify-between gap-3 mt-1.5 min-h-9">
               <% if content_for?(:page_title) %>
                 <h1 class="text-primary text-xl font-medium">
                   <%= content_for :page_title %>
@@ -25,7 +25,7 @@
                 <div></div>
               <% end %>
               <% if content_for?(:page_actions) %>
-                <div class="flex items-center gap-2 shrink-0">
+                <div class="flex items-center gap-2 max-w-full">
                   <%= yield :page_actions %>
                 </div>
               <% end %>
diff --git a/app/views/settings/api_keys/created.html.erb b/app/views/settings/api_keys/created.html.erb
index 05f7eceb020..b9b7ce09a6a 100644
--- a/app/views/settings/api_keys/created.html.erb
+++ b/app/views/settings/api_keys/created.html.erb
@@ -22,14 +22,17 @@
       <p class="text-secondary text-sm mb-3">Copy and store this key securely. You'll need it to authenticate your API requests.</p>
 
       <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
-        <div class="flex items-center justify-between gap-3">
-          <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
-          <%= render DS::Button.new(
-            text: "Copy API Key",
-            variant: "ghost",
-            icon: "copy",
-            data: { action: "clipboard#copy" }
-          ) %>
+        <div class="w-full overflow-hidden">
+          <code id="api-key-display" class="block w-full min-w-0 overflow-x-auto font-mono text-sm text-primary break-all whitespace-pre-wrap" data-clipboard-target="source"><%= @api_key.plain_key %></code>
+          <div class="mt-2 flex justify-end">
+            <%= render DS::Button.new(
+              variant: :icon,
+              icon: "copy",
+              title: "Copy",
+              aria: { label: "Copy" },
+              data: { action: "clipboard#copy" }
+            ) %>
+          </div>
         </div>
       </div>
     </div>
@@ -76,10 +79,19 @@
     </div>
 
     <div class="bg-surface-inset rounded-xl p-4">
-      <h4 class="font-medium text-primary mb-3">How to use your API key</h4>
+      <h4 class="font-medium text-primary mb-3"><%= t("settings.api_keys.created.usage_instructions_title") %></h4>
       <p class="text-secondary text-sm mb-3"><%= t("settings.api_keys.show.current_api_key.usage_instructions", product_name: product_name) %></p>
-      <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary">
-        curl -H "X-Api-Key: <%= @api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts
+      <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary max-w-full overflow-hidden" data-controller="clipboard">
+        <code class="block w-full min-w-0 overflow-x-auto break-all whitespace-pre-wrap" data-clipboard-target="source">curl -H "X-Api-Key: <%= @api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts</code>
+        <div class="mt-2 flex justify-end">
+          <%= render DS::Button.new(
+            text: "Copy",
+            variant: "ghost",
+            icon: "copy",
+            class: "shrink-0",
+            data: { action: "clipboard#copy" }
+          ) %>
+        </div>
       </div>
     </div>
 
diff --git a/app/views/settings/api_keys/created.turbo_stream.erb b/app/views/settings/api_keys/created.turbo_stream.erb
index 89dab090b29..cced8f0bd11 100644
--- a/app/views/settings/api_keys/created.turbo_stream.erb
+++ b/app/views/settings/api_keys/created.turbo_stream.erb
@@ -27,14 +27,17 @@
             <p class="text-secondary text-sm mb-3">Copy and store this key securely. You'll need it to authenticate your API requests.</p>
 
             <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
-              <div class="flex items-center justify-between gap-3">
-                <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
-                <%= render DS::Button.new(
-                  text: "Copy API Key",
-                  variant: "ghost",
-                  icon: "copy",
-                  data: { action: "clipboard#copy" }
-                ) %>
+              <div class="w-full overflow-hidden">
+                <code id="api-key-display" class="block w-full min-w-0 overflow-x-auto font-mono text-sm text-primary break-all whitespace-pre-wrap" data-clipboard-target="source"><%= @api_key.plain_key %></code>
+                <div class="mt-2 flex justify-end">
+                  <%= render DS::Button.new(
+                    variant: :icon,
+                    icon: "copy",
+                    title: "Copy",
+                    aria: { label: "Copy" },
+                    data: { action: "clipboard#copy" }
+                  ) %>
+                </div>
               </div>
             </div>
           </div>
@@ -81,10 +84,19 @@
           </div>
 
           <div class="bg-surface-inset rounded-xl p-4">
-            <h4 class="font-medium text-primary mb-3">How to use your API key</h4>
+            <h4 class="font-medium text-primary mb-3"><%= t("settings.api_keys.created.usage_instructions_title") %></h4>
             <p class="text-secondary text-sm mb-3">Include your API key in the X-Api-Key header when making requests:</p>
-            <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary">
-              curl -H "X-Api-Key: <%= @api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts
+            <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary max-w-full overflow-hidden" data-controller="clipboard">
+              <code class="block w-full min-w-0 overflow-x-auto break-all whitespace-pre-wrap" data-clipboard-target="source">curl -H "X-Api-Key: <%= @api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts</code>
+              <div class="mt-2 flex justify-end">
+                <%= render DS::Button.new(
+                  text: "Copy",
+                  variant: "ghost",
+                  icon: "copy",
+                  class: "shrink-0",
+                  data: { action: "clipboard#copy" }
+                ) %>
+              </div>
             </div>
           </div>
 
diff --git a/app/views/settings/api_keys/new.html.erb b/app/views/settings/api_keys/new.html.erb
index 20e322981be..763a1d7912b 100644
--- a/app/views/settings/api_keys/new.html.erb
+++ b/app/views/settings/api_keys/new.html.erb
@@ -51,7 +51,7 @@
       ) %>
 
       <%= render DS::Button.new(
-        text: "Save API Key",
+        text: t("settings.api_keys.new.save_key"),
         variant: "primary",
         type: "submit"
       ) %>
diff --git a/app/views/settings/api_keys/show.html.erb b/app/views/settings/api_keys/show.html.erb
index 5aefbe56045..aa514b4c565 100644
--- a/app/views/settings/api_keys/show.html.erb
+++ b/app/views/settings/api_keys/show.html.erb
@@ -23,14 +23,16 @@
         <p class="text-secondary text-sm mb-3">Copy and store this key securely. You'll need it to authenticate your API requests.</p>
 
         <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
-          <div class="flex items-center justify-between gap-3">
-            <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
-            <%= render DS::Button.new(
-              text: "Copy API Key",
-              variant: "ghost",
-              icon: "copy",
-              data: { action: "clipboard#copy" }
-            ) %>
+          <div class="w-full overflow-hidden">
+            <code id="api-key-display" class="block w-full min-w-0 overflow-x-auto font-mono text-sm text-primary break-all whitespace-pre-wrap" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
+            <div class="mt-2 flex justify-end">
+              <%= render DS::Button.new(
+                variant: "ghost",
+                icon: "copy",
+                class: "shrink-0",
+                data: { action: "clipboard#copy" }
+              ) %>
+            </div>
           </div>
         </div>
       </div>
@@ -38,8 +40,17 @@
       <div class="bg-surface-inset rounded-xl p-4">
         <h4 class="font-medium text-primary mb-3">How to use your API key</h4>
         <p class="text-secondary text-sm mb-3"><%= t(".current_api_key.usage_instructions", product_name: product_name) %></p>
-        <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary">
-          curl -H "X-Api-Key: <%= @current_api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts
+        <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary max-w-full overflow-hidden" data-controller="clipboard">
+          <code class="block w-full min-w-0 overflow-x-auto break-all whitespace-pre-wrap" data-clipboard-target="source">curl -H "X-Api-Key: <%= @current_api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts</code>
+          <div class="mt-2 flex justify-end">
+            <%= render DS::Button.new(
+              variant: :icon,
+              icon: "copy",
+              title: "Copy",
+              aria: { label: "Copy" },
+              data: { action: "clipboard#copy" }
+            ) %>
+          </div>
         </div>
       </div>
 
@@ -111,29 +122,41 @@
         <p class="text-secondary text-sm mb-3">Copy and store this key securely. You'll need it to authenticate your API requests.</p>
 
         <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
-          <div class="flex items-center justify-between gap-3">
-            <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
-            <%= render DS::Button.new(
-              text: "Copy API Key",
-              variant: "ghost",
-              icon: "copy",
-              data: { action: "clipboard#copy" }
-            ) %>
+          <div class="w-full overflow-hidden">
+            <code id="api-key-display" class="block w-full min-w-0 overflow-x-auto font-mono text-sm text-primary break-all whitespace-pre-wrap" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
+            <div class="mt-2 flex justify-end">
+              <%= render DS::Button.new(
+                title: t(".current_api_key.copy_key"),
+                variant: "ghost",
+                icon: "copy",
+                class: "shrink-0",
+                data: { action: "clipboard#copy" }
+              ) %>
+            </div>
           </div>
         </div>
       </div>
 
       <div class="bg-surface-inset rounded-xl p-4">
-        <h4 class="font-medium text-primary mb-3">How to use your API key</h4>
+        <h4 class="font-medium text-primary mb-3"><%= t(".current_api_key.usage_instructions_title") %></h4>
         <p class="text-secondary text-sm mb-3"><%= t(".current_api_key.usage_instructions", product_name: product_name) %></p>
-        <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary">
-          curl -H "X-Api-Key: <%= @current_api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts
+        <div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary max-w-full overflow-hidden" data-controller="clipboard">
+          <code class="block w-full min-w-0 overflow-x-auto break-all whitespace-pre-wrap" data-clipboard-target="source">curl -H "X-Api-Key: <%= @current_api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts</code>
+          <div class="mt-2 flex justify-end">
+            <%= render DS::Button.new(
+              variant: :icon,
+              icon: "copy",
+              title: "Copy",
+              aria: { label: "Copy" },
+              data: { action: "clipboard#copy" }
+            ) %>
+          </div>
         </div>
       </div>
 
       <div class="flex justify-end pt-4 border-t border-primary">
         <%= render DS::Button.new(
-          text: "Revoke Key",
+          text: t("settings.api_keys.show.current_api_key.revoke_key"),
           href: settings_api_key_path,
           method: :delete,
           variant: "destructive",
@@ -148,7 +171,7 @@
   <%= content_for :page_title, t(".no_api_key.title") %>
   <%= content_for :page_actions do %>
     <%= render DS::Link.new(
-      text: t(".no_api_key.create_api_key"),
+      text: t("settings.api_keys.show.no_api_key.create_api_key"),
       href: new_settings_api_key_path,
       variant: "primary"
     ) %>
diff --git a/config/locales/views/settings/api_keys/en.yml b/config/locales/views/settings/api_keys/en.yml
index f6f3d4d4684..c6e96c04ce0 100644
--- a/config/locales/views/settings/api_keys/en.yml
+++ b/config/locales/views/settings/api_keys/en.yml
@@ -39,7 +39,7 @@ en:
           usage_instructions_title: "How to use your API key"
           usage_instructions: "Include your API key in the X-Api-Key header when making requests to the %{product_name} API:"
           regenerate_key: "Create New Key"
-          revoke_key: "Revoke Key"
+          revoke_key: "Revoke API Key"
           revoke_confirmation: "Are you sure you want to revoke this API key? This action cannot be undone and will immediately disable all applications using this key."
       new:
         title: "Create API Key"
@@ -58,6 +58,7 @@ en:
         security_warning_title: "Important Security Notice"
         security_warning: "Your API key will be shown only once after creation. Store it securely and never share it publicly. If you lose it, you'll need to create a new one."
         create_key: "Create API Key"
+        save_key: "Save API Key"
         cancel: "Cancel"
       created:
         title: "API Key Created"
diff --git a/test/system/settings/api_keys_test.rb b/test/system/settings/api_keys_test.rb
index e558cb945ce..3664f606dd8 100644
--- a/test/system/settings/api_keys_test.rb
+++ b/test/system/settings/api_keys_test.rb
@@ -65,7 +65,7 @@ class Settings::ApiKeysTest < ApplicationSystemTestCase
     assert_text "Read/Write"
     assert_text "Never used"
     assert_link "Create New Key"
-    assert_button "Revoke Key"
+    assert_button "Revoke API Key"
   end
 
   test "should show usage instructions and example curl command" do
@@ -121,7 +121,7 @@ class Settings::ApiKeysTest < ApplicationSystemTestCase
     visit settings_api_key_path
 
     # Click the revoke button to open the modal
-    click_button "Revoke Key"
+    click_button "Revoke API Key"
 
     # Wait for the dialog and then confirm
     assert_selector "#confirm-dialog", visible: true