chore: Adds pseudo element around the annotation trigger (#3260)

cloudscape-design · Feb 12, 2025 · 9976a86 · 9976a86
1 parent 645d7db
commit 9976a86
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/annotation-context/annotation/styles.scss b/src/annotation-context/annotation/styles.scss
@@ -49,11 +49,19 @@
   padding-inline: 0;
   cursor: pointer;
   scroll-margin: var(#{custom-props.$contentScrollMargin}, 40px 0 0 0);
+  position: relative;
 
   // These dimensions match the dimensions of the contained SVG icon.
   inline-size: 16px;
   block-size: 16px;
 
+  // Extends the clickable area beyond the actual size of the button
+  &:before {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * #{awsui.$space-xxs});
+  }
+
   &:focus {
     outline: none;
   }

diff --git a/src/hotspot/styles.scss b/src/hotspot/styles.scss
@@ -35,5 +35,5 @@
 }
 
 .inlineWrapper {
-  margin-inline-start: awsui.$space-xxs;
+  margin-inline: awsui.$space-xxs;
 }