fix: Opt-out dialog is vertically cut off if height is set to auto (#506

)

fix: Opt-out dialog is vertically cut off if height is set to auto

src/components/opt-in-flyout/flyout-impl.js

@@ -47,13 +47,19 @@ class FlyoutImplementation extends composeMixins(
 			heading1Styles,
 			css`
 				:host {
-					height: var(--d2l-flyout-custom-element-height, 100%);
+					height: var(--d2l-flyout-custom-element-height, auto);
 					overflow: hidden;
 					pointer-events: none;
 					position: absolute;
 					width: 100%;
 				}
 
+				:host([opened]) {
+					background-color: rgba(255, 255, 255, 0.7);
+					height: 100%;
+					pointer-events: auto;
+				}
+
 				#flyout {
 					background-color: white;
 					border-bottom: 1px solid var(--d2l-color-mica);
@@ -62,7 +68,7 @@ class FlyoutImplementation extends composeMixins(
 					overflow: visible;
 					padding-bottom: 2rem;
 					pointer-events: auto;
-					position: var(--d2l-flyout-custom-element-position, absolute);
+					position: var(--d2l-flyout-custom-element-position, relative);
 					top: var(--d2l-flyout-custom-element-top, 0);
 					width: 100%;
 					z-index: var(--d2l-flyout-custom-element-z-index, 900);