fix: Fix line numbers misalignment with single-line content when actions are provided (#43)

Author: avinashbot

pages/code-view/with-line-numbers.page.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { SpaceBetween } from "@cloudscape-design/components";
+import { Button, SpaceBetween } from "@cloudscape-design/components";
 
 import { CodeView } from "../../lib/components";
 import { ScreenshotArea } from "../screenshot-area";
@@ -12,6 +12,11 @@ export default function CodeViewPage() {
       <SpaceBetween direction="vertical" size="l">
         <CodeView lineNumbers={true} content={`# Hello World`} />
         <CodeView lineNumbers={true} content={`# Hello World\n\nThis is Cloudscape.`} />
+        <CodeView
+          lineNumbers={true}
+          content={`# Hello World`}
+          actions={<Button ariaLabel="Copy code" iconName="copy"></Button>}
+        />
       </SpaceBetween>
     </ScreenshotArea>
   );

src/code-view/internal.tsx

@@ -49,7 +49,10 @@ export function InternalCodeView({
       <div className={clsx(lineNumbers && styles["root-with-numbers"], actions && styles["root-with-actions"])}>
         <Box color="text-status-inactive" fontSize="body-m">
           {lineNumbers && (
-            <div className={styles["line-numbers"]} aria-hidden={true}>
+            <div
+              className={clsx(styles["line-numbers"], actions && styles["line-numbers-with-actions"])}
+              aria-hidden={true}
+            >
               {getLineNumbers(content).map((number) => (
                 <span key={number}>{number}</span>
               ))}

src/code-view/styles.scss

@@ -49,6 +49,9 @@ $color-background-code-view-dark: #282c34;
   :global(.awsui-polaris-dark-mode) & {
     background-color: $color-background-code-view-dark;
   }
+  &-with-actions {
+    min-block-size: cs.$space-scaled-xxl;
+  }
   border-start-start-radius: cs.$border-radius-tiles;
   border-end-start-radius: cs.$border-radius-tiles;
   background-color: $color-background-code-view-light;