fix(panel): prevent menu actions from being clipped in Safari (#9488)

driskull · web-flow · commit 29eb4ce802e8 · 2024-06-03T17:08:09.000-07:00
**Related Issue:** #8028 ## Summary - do not cut off menu actions - `position:relative` on the container class within the panel seems to fix the safari issue. Not sure how we can test this without manual testing or getting different browser screenshots setup. @geospatialem @DitwanP could one of you help test this fix?
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
@@ -43,7 +43,7 @@
 }
 
 .container {
-  @apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
+  @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
 
   transition:
     max-block-size var(--calcite-animation-timing),

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`.container {`
`46`		`- @apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;`
	`46`	`+ @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;`
`47`	`47`
`48`	`48`	`transition:`
`49`	`49`	`max-block-size var(--calcite-animation-timing),`