Adjust width of API key display control

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.45.5",
+  "version": "7.45.6",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,10 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.45.6
+*Released*: 8 July 2026
+- Adjust width of API key display control so its copy-to-clipboard button doesn't wrap to the next line
+
 ### version 7.45.5
 *Released*: 7 July 2026
 - Export DetailDisplay

packages/components/src/internal/components/user/APIKeysPanel.tsx

@@ -201,7 +201,7 @@ export const KeyGeneratorModal: FC<ModalProps> = props => {
                     <div className="top-padding form-group">
                         <input
                             aria-label={type + ' value'}
-                            className="form-control api-key__input"
+                            className="form-control api-key__display"
                             disabled
                             name={type + '_token'}
                             type="text"

packages/components/src/theme/user.scss

@@ -32,3 +32,9 @@ div:has(> .user-detail-modal) > .modal-backdrop {
 .api-key__input {
     display: inline-block;
 }
+
+// 90% to leave room for the copy-to-clipboard button when displaying the newly generated API key
+.api-key__display {
+    width: 90%;
+    display: inline-block;
+}