Fix divider height issue in compact

cloudscape-design · Feb 20, 2025 · 1e3e06d · 1e3e06d
1 parent 09eea70
commit 1e3e06d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
@@ -83,10 +83,14 @@ $segment-divider-width: 1px;
     position: absolute;
     inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width));
     block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2));
+    min-block-size: calc(awsui.$line-height-body-m - $segment-gap * 2);
     inline-size: $segment-divider-width;
     background: awsui.$color-border-input-default;
     z-index: 1;
   }
+  &:not(.refresh):not(:last-child)::after {
+    inset-inline-end: calc(-1 * $segment-gap);
+  }
 
   @for $i from 1 through 6 {
     &:nth-child(#{$i}) {

diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
@@ -8,8 +8,6 @@
 @use 'sass:list' as list;
 @use '../internal/styles/tokens' as awsui;
 
-$segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width});
-
 @function repeatValue($value, $times) {
   $result: ();
 
@@ -36,10 +34,11 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width});
   align-items: center;
   min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs);
   padding-inline: awsui.$space-static-xxxs;
-  gap: $segment-space;
+  gap: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width});
 
   &:not(.refresh) {
     padding-inline: calc(awsui.$space-static-xxxs + 1px);
+    gap: calc(#{seg.$segment-gap} * 2 - #{seg.$segment-divider-width});
   }
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {