fix: Align code to the top when line wrapping is activated (#101)

Author: jperals

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

@@ -1,12 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { Box, SpaceBetween } from "@cloudscape-design/components";
+import { Box, Button, SpaceBetween } from "@cloudscape-design/components";
 
 import { CodeView } from "../../lib/components";
 import cppHighlight from "../../lib/components/code-view/highlight/cpp";
 import { ScreenshotArea } from "../screenshot-area";
 
+const longLine = `LoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendum`;
+const copyButton = <Button ariaLabel="Copy code" iconName="copy"></Button>;
+
 export default function CodeViewPage() {
   return (
     <ScreenshotArea>
@@ -40,11 +43,11 @@ export default function CodeViewPage() {
           content={`void UserQuery(map<string, vector<string> > &svmap) {\n    string queryName;\n    cout << "Please enter a family name you want to query: ";\n    cin >> queryName;\n    int i = 0;\n    for (map<string, vector<string> >::iterator itr = svmap.begin(), mapEnd = svmap.end(); itr != mapEnd; ++itr) {\n        i++;\n        if (itr->first == queryName) {\n            cout << "The " << itr->first << " family has " << itr->second.size() << " children: ";\n            for (vector<string>::iterator itrvec = itr->second.begin(), vecEnd = itr->second.end(); itrvec != vecEnd; ++itrvec)\n                cout << *itrvec << " ";\n            break;\n        }\n    }\n    if (i >= svmap.size())\n        cout << "Sorry, the " << queryName << " family is not found." << endl;\n}`}
         />
         <Box>Long word</Box>
-        <CodeView
-          wrapLines={true}
-          lineNumbers={true}
-          content={`LoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendumLoremipsumdolorsitametconsecteturadipiscingelitCurabitursagittismetusidornarebibendum`}
-        />
+        <CodeView wrapLines={true} lineNumbers={true} content={longLine} />
+        <Box>Wrapping, line numbers, actions, short line</Box>
+        <CodeView lineNumbers={true} wrapLines={true} content={`# Hello World`} actions={copyButton} />
+        <Box>Wrapping, line numbers, actions, long line</Box>
+        <CodeView lineNumbers={true} wrapLines={true} content={longLine} actions={copyButton} />
       </SpaceBetween>
     </ScreenshotArea>
   );

src/code-view/styles.scss

@@ -39,18 +39,13 @@ $color-background-code-view-dark: #282c34;
   }
 }
 
-.code-table-with-actions.code-table-with-line-wrapping {
-  padding-inline-end: cs.$space-static-xxl;
-}
-
 .screenreader-only {
   position: absolute;
   inset-block-start: -9999px;
   inset-inline-start: -9999px;
 }
 
 .line-number {
-  vertical-align: text-top;
   white-space: nowrap;
   position: sticky;
   inset-inline-start: 0;
@@ -84,6 +79,16 @@ $color-background-code-view-dark: #282c34;
   }
 }
 
+.code-table-with-line-wrapping {
+  .line-number,
+  .code-line {
+    vertical-align: text-top;
+  }
+  &.code-table-with-actions {
+    padding-inline-end: cs.$space-static-xxl;
+  }
+}
+
 .actions {
   position: absolute;
   inset-block-start: cs.$space-scaled-xs;