From 3401aa57cd99e22ce19291b3d5072bc1ef822aeb Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <andrei.zhaleznichenka@gmail.com>
Date: Mon, 6 Jan 2025 18:22:14 +0100
Subject: [PATCH] fix: Fixes borders, dark mode highlight, and actions padding
 style issues (#57)

* fix: Fixes borders, dark mode highlight, and actions padding style issues

* removes debugging code

* re-add background color to line numbers
---
 pages/code-view/simple.page.tsx | 13 +++++++++----
 src/code-view/internal.tsx      |  6 +++---
 src/code-view/styles.scss       | 33 ++++++++++++++++++---------------
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/pages/code-view/simple.page.tsx b/pages/code-view/simple.page.tsx
index 0d3d00e..749b91e 100644
--- a/pages/code-view/simple.page.tsx
+++ b/pages/code-view/simple.page.tsx
@@ -1,16 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { SpaceBetween } from "@cloudscape-design/components";
+
 import { CodeView } from "../../lib/components";
 import { ScreenshotArea } from "../screenshot-area";
+
 export default function CodeViewPage() {
   return (
     <ScreenshotArea>
       <h1>Code View</h1>
-      <CodeView content={"Hello World"} />
-      <CodeView
-        content={`public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}`}
-      />
+      <SpaceBetween size="s">
+        <CodeView content={"Hello World"} />
+        <CodeView
+          content={`public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}`}
+        />
+      </SpaceBetween>
     </ScreenshotArea>
   );
 }
diff --git a/src/code-view/internal.tsx b/src/code-view/internal.tsx
index 34507ce..b434c51 100644
--- a/src/code-view/internal.tsx
+++ b/src/code-view/internal.tsx
@@ -43,8 +43,8 @@ export function InternalCodeView({
   ...props
 }: InternalCodeViewProps) {
   const baseProps = getBaseProps(props);
-  const preRef = useRef<HTMLPreElement>(null);
-  const darkMode = useCurrentMode(preRef) === "dark";
+  const containerRef = useRef<HTMLDivElement>(null);
+  const darkMode = useCurrentMode(containerRef) === "dark";
 
   const regionProps = ariaLabel || ariaLabelledby ? { role: "region" } : {};
 
@@ -64,7 +64,7 @@ export function InternalCodeView({
       dir="ltr"
       ref={__internalRootRef}
     >
-      <div className={styles["scroll-container"]}>
+      <div className={styles["scroll-container"]} ref={containerRef}>
         <table
           role="presentation"
           className={clsx(
diff --git a/src/code-view/styles.scss b/src/code-view/styles.scss
index dbaf0c1..3ebf78f 100644
--- a/src/code-view/styles.scss
+++ b/src/code-view/styles.scss
@@ -10,6 +10,11 @@ $color-background-code-view-dark: #282c34;
 
 .root {
   position: relative;
+  border-start-start-radius: cs.$border-radius-tiles;
+  border-start-end-radius: cs.$border-radius-tiles;
+  border-end-start-radius: cs.$border-radius-tiles;
+  border-end-end-radius: cs.$border-radius-tiles;
+  
   background-color: $color-background-code-view-light;
   :global(.awsui-dark-mode) &,
   :global(.awsui-polaris-dark-mode) & {
@@ -22,18 +27,15 @@ $color-background-code-view-dark: #282c34;
 }
 
 .code-table {
-  border-start-start-radius: cs.$border-radius-tiles;
-  border-start-end-radius: cs.$border-radius-tiles;
-  border-end-start-radius: cs.$border-radius-tiles;
-  border-end-end-radius: cs.$border-radius-tiles;
   padding-block-start: cs.$space-static-xs;
   padding-block-end: cs.$space-static-xs;
   table-layout: auto;
-  width: 100%;
+  inline-size: 100%;
   border-spacing: 0;
 
   &-with-actions {
-    min-height: calc(2 * cs.$space-scaled-xs + cs.$space-scaled-xxl);
+    min-block-size: calc(2 * cs.$space-scaled-xs + cs.$space-scaled-xxl);
+    padding-inline-end: calc(2 * var(--space-static-xxxl-qj5g91, 40px));
   }
 }
 
@@ -42,15 +44,16 @@ $color-background-code-view-dark: #282c34;
 }
 
 .line-number {
-  border-right-color: cs.$color-border-divider-default;
-  background-color: $color-background-code-view-light;
+  border-inline-end-color: cs.$color-border-divider-default;
   vertical-align: text-top;
   position: sticky;
-  left: 0;
-  border-right-width: 1px;
-  border-right-style: solid;
-  padding-left: cs.$space-static-xs;
-  padding-right: cs.$space-static-xs;
+  inset-inline-start: 0;
+  border-inline-end-width: 1px;
+  border-inline-end-style: solid;
+  padding-inline-start: cs.$space-static-xs;
+  padding-inline-end: cs.$space-static-xs;
+
+  background-color: $color-background-code-view-light;
   :global(.awsui-dark-mode) &,
   :global(.awsui-polaris-dark-mode) & {
     background-color: $color-background-code-view-dark;
@@ -63,8 +66,8 @@ $color-background-code-view-dark: #282c34;
 }
 
 .code-line {
-  padding-left: cs.$space-static-xs;
-  padding-right: cs.$space-static-xs;
+  padding-inline-start: cs.$space-static-xs;
+  padding-inline-end: cs.$space-static-xs;
   &-wrap {
     white-space: pre-wrap;
     word-break: break-word;