storaged: Fix nesting in tang key verification dialog

A ClipboardCopy is a block element (`<div>`) and thus cannot be put into a `<p>`. Make them silblings. To retain the current layout, turn the text into a simple span, so that the text and the ClipboardCopy still appear side by side.
cockpit-project · Oct 25, 2023 · 5d835e5 · 5d835e5
1 parent 27c5e7f
commit 5d835e5
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/pkg/storaged/crypto-keyslots.jsx b/pkg/storaged/crypto-keyslots.jsx
@@ -622,15 +622,13 @@ export const TangKeyVerification = ({ url, adv }) => {
             <Text component={TextVariants.p}>{_("Check the key hash with the Tang server.")}</Text>
 
             <Text component={TextVariants.h3}>{_("How to check")}</Text>
-            <Text component={TextVariants.p}>
-                {_("In a terminal, run: ")}
-                <ClipboardCopy hoverTip={_("Copy to clipboard")}
-                               clickTip={_("Successfully copied to clipboard!")}
-                               variant="inline-compact"
-                               isCode>
-                    {cmd}
-                </ClipboardCopy>
-            </Text>
+            <span>{_("In a terminal, run: ")}</span>
+            <ClipboardCopy hoverTip={_("Copy to clipboard")}
+                            clickTip={_("Successfully copied to clipboard!")}
+                            variant="inline-compact"
+                            isCode>
+                {cmd}
+            </ClipboardCopy>
             <Text component={TextVariants.p}>
                 {_("Check that the SHA-256 or SHA-1 hash from the command matches this dialog.")}
             </Text>