fix(styles): Popover update max-width and some styles (#2926)

Co-authored-by: Oliver Schürch <[email protected]>

.changeset/nervous-experts-change.md

@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated popover styles.
+- Removed popover `min-width` and updated `max-width`.
+- Simplyfied popover arrow size definition.
+- Removed `:focus` selector fom `.text-auto` utility class

packages/components/src/components/post-popover/post-popover.scss

@@ -21,8 +21,8 @@
   align-items: self-start;
   padding: 0.5em;
 
-  // Max 2/3 of the column width
-  max-width: min(66vw, 60rem);
+  min-width: 160px;
+  max-width: 280px;
 
   // Max available width on mobile, popovercontainer will handle offsets
   @include post.media-breakpoint-down(rg) {
@@ -32,4 +32,5 @@
 
 .popover-content {
   padding: 0.5em;
+  flex-grow: 1;
 }

packages/components/src/components/post-popovercontainer/post-popovercontainer.scss

@@ -39,9 +39,7 @@
 }
 
 .arrow {
-  // Diagonal of 16px -> 1rem -> 1/1.41 = ~0.7
-  // https://www.omnicalculator.com/math/square-diagonal?c=CHF&v=hide:0,diagonal:16!cm
-  $arrow-size: math.div(spacing.$size-regular, math.sqrt(2));
+  $arrow-size: 0.5825rem;
   position: absolute;
   width: $arrow-size;
   height: $arrow-size;

packages/styles/src/components/utilities.scss

@@ -73,7 +73,6 @@ span.spacer {
   a {
     color: inherit;
 
-    &:focus,
     &:hover {
       opacity: 0.8;
     }
@@ -83,7 +82,6 @@ span.spacer {
 a {
   color: var(--post-contrast-color);
 
-  &:focus,
   &:hover {
     color: rgba(var(--post-contrast-color-rgb), 0.8);
   }