diff --git a/pages/code-view/with-line-wrapping.page.tsx b/pages/code-view/with-line-wrapping.page.tsx
index 15ee1d0..98ae36c 100644
--- a/pages/code-view/with-line-wrapping.page.tsx
+++ b/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 = ;
+
export default function CodeViewPage() {
return (
@@ -40,11 +43,11 @@ export default function CodeViewPage() {
content={`void UserQuery(map > &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 >::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::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}`}
/>
Long word
-
+
+ Wrapping, line numbers, actions, short line
+
+ Wrapping, line numbers, actions, long line
+
);
diff --git a/src/code-view/styles.scss b/src/code-view/styles.scss
index 0c7f604..dc71581 100644
--- a/src/code-view/styles.scss
+++ b/src/code-view/styles.scss
@@ -39,10 +39,6 @@ $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;
@@ -50,7 +46,6 @@ $color-background-code-view-dark: #282c34;
}
.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;