From 2dedc133077c53f670d6316d9dce11b6d39f3ead Mon Sep 17 00:00:00 2001
From: Eli Bosley <eli@bosley.dev>
Date: Thu, 5 Mar 2026 17:34:09 -0500
Subject: [PATCH] Fix API key key-display wrapping

---
 web/src/components/ApiKey/ApiKeyManager.vue   | 54 ++++++++++---------
 .../components/ApiKeyAuthorize.standalone.vue | 18 +++----
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/web/src/components/ApiKey/ApiKeyManager.vue b/web/src/components/ApiKey/ApiKeyManager.vue
index 78b31c6c58..c69bd89596 100644
--- a/web/src/components/ApiKey/ApiKeyManager.vue
+++ b/web/src/components/ApiKey/ApiKeyManager.vue
@@ -261,40 +261,42 @@ async function copyKeyTemplate(key: ApiKeyFragment) {
                     role
                   }}</Badge>
                 </div>
-                <div class="flex items-center gap-2">
-                  <span class="text-sm font-medium text-green-700"><b>API Key:</b></span>
-                  <div class="relative max-w-[300px] flex-1">
-                    <Input
-                      :model-value="showKey[key.id] ? key.key : '••••••••••••••••••••••••••••••••'"
-                      class="w-full rounded px-2 py-1 pr-10 font-mono text-xs"
-                      readonly
-                    />
+                <div class="flex flex-col gap-2">
+                  <div class="flex items-center gap-2">
+                    <span class="text-sm font-medium text-green-700"><b>API Key:</b></span>
+                    <TooltipProvider>
+                      <Tooltip :delay-duration="0">
+                        <TooltipTrigger>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            class="h-8 w-8"
+                            @click="copyKeyValue(key.key)"
+                          >
+                            <ClipboardDocumentIcon class="h-4 w-4" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{{ copied ? 'Copied!' : 'Copy to clipboard...' }}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                  <div class="relative min-w-0">
+                    <code
+                      class="bg-background block w-full rounded border px-3 py-2 pr-10 font-mono text-xs leading-5 break-all whitespace-pre-wrap"
+                    >
+                      {{ showKey[key.id] ? key.key : '••••••••••••••••••••••••••••••••' }}
+                    </code>
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="absolute inset-y-0 right-2 h-auto w-auto px-1 text-gray-500 hover:text-gray-700"
+                      class="absolute top-2 right-2 h-auto w-auto px-1 text-gray-500 hover:text-gray-700"
                       @click="toggleShowKey(key.id)"
                     >
                       <component :is="showKey[key.id] ? EyeSlashIcon : EyeIcon" class="h-5 w-5" />
                     </Button>
                   </div>
-                  <TooltipProvider>
-                    <Tooltip :delay-duration="0">
-                      <TooltipTrigger>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          class="h-8 w-8"
-                          @click="copyKeyValue(key.key)"
-                        >
-                          <ClipboardDocumentIcon class="h-4 w-4" />
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>{{ copied ? 'Copied!' : 'Copy to clipboard...' }}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
                 </div>
               </div>
               <div
diff --git a/web/src/components/ApiKeyAuthorize.standalone.vue b/web/src/components/ApiKeyAuthorize.standalone.vue
index ecd56af7a9..0fdd714c67 100644
--- a/web/src/components/ApiKeyAuthorize.standalone.vue
+++ b/web/src/components/ApiKeyAuthorize.standalone.vue
@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import { ClipboardDocumentIcon, EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/outline';
-import { Button, Input } from '@unraid/ui';
+import { Button } from '@unraid/ui';
 
 import ApiKeyCreate from '~/components/ApiKey/ApiKeyCreate.vue';
 import { useAuthorizationLink } from '~/composables/useAuthorizationLink.js';
@@ -152,16 +152,16 @@ const returnToApp = () => {
         <div>
           <label class="text-muted-foreground mb-2 block text-sm font-medium">Generated API Key</label>
           <div class="bg-secondary rounded-lg p-3">
-            <div class="mb-2 flex gap-2">
-              <div class="relative flex-1">
-                <Input
-                  :model-value="showKey ? createdApiKey : '••••••••••••••••••••••••••••••••'"
-                  class="bg-background pr-10 font-mono text-sm"
-                  readonly
-                />
+            <div class="mb-2 flex items-start gap-2">
+              <div class="relative min-w-0 flex-1">
+                <code
+                  class="bg-background block w-full rounded border px-3 py-2 pr-10 font-mono text-sm leading-6 break-all whitespace-pre-wrap"
+                >
+                  {{ showKey ? createdApiKey : '••••••••••••••••••••••••••••••••' }}
+                </code>
                 <button
                   type="button"
-                  class="text-muted-foreground hover:text-foreground absolute inset-y-0 right-2 flex items-center px-1"
+                  class="text-muted-foreground hover:text-foreground absolute top-2 right-2 flex items-center px-1"
                   @click="toggleShowKey"
                 >
                   <component :is="showKey ? EyeSlashIcon : EyeIcon" class="h-4 w-4" />