Merge branch 'css-responsive-patch-67341'

* css-responsive-patch-67341:
  Sticky-Header: enhance comment
  Add compiled code
  Sticky-Header: hide sticky-header initially and only show it when there is an actual header inside it. This prevents a layout gap in the compare-view, where the sticky header would mistakenly take up a row/column in the grid. See #67341
  Map: allows map buttons to wrap onto a new line.
  Block: remove mixin from CUI that is used only in fylr theme.
  Add compiled code
  Sticky Header: fix regression bug where sticky header would not work correctly anymore after being a child of @container, fixed by using position: sticky, tweak sticky header background to be less transparent. See #67341

Author: Stefanie Hein

public/cui_fylr.css

@@ -662,9 +662,8 @@ $drag-lasso-background: 	$primary !default;
 $sticky-header-font-size: 		$font-size-sm !default;
 $sticky-header-color: 			$body-color !default;
 $sticky-header-border-color:	$hr-border-color-dark !default;
-$sticky-header-opacity:			0.94 !default;
-$sticky-header-background:      rgba($body-bg, $sticky-header-opacity) !default;
-$sticky-header-background-pane: rgba($pane-background, $sticky-header-opacity) !default;
+$sticky-header-background-body: color.adjust($body-bg, $alpha: -0.06);
+$sticky-header-background-pane: color.adjust($pane-background, $alpha: -0.06);
 
 // * Digi Display
 // * ==========================================

src/scss/themes/fylr/_variables.scss

@@ -44,8 +44,9 @@
 	left: $spacer-xs;
 	right: $spacer-xs;
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: space-between;
-	gap: $spacer-xs;
+	gap: $spacer-sm $spacer-xs;
 
 	> * {
 		pointer-events: all;

src/scss/themes/fylr/components/_map.scss

@@ -52,24 +52,37 @@
 }
 
 .cui-sticky-header-control {
-	display: none; // hide initially to prevent grid gap from taking effect (e.g. standard view overlay)
-	position: sticky !important;
+	display: none; // hide initially to prevent grid gap from taking effect (e.g. standard view overlay, compare-view)
+	position: sticky;
+	overflow: hidden;
 	top: 0 !important;
 	left: 0 !important;
+	right: 0 !important;
+	height: 0;
 	width: 100% !important;
 	z-index: 1;
-	overflow: hidden;
 	flex: 0 0 auto; // make sure header is visible when placed in flex-layout (see metadata-browser)
 
 	&:has(.cui-sticky-header) {
 		display: block;
-	}
+	}	
 
 	.cui-sticky-header {
 		position: absolute;
 		left: 0;
 		right: 0;
-		background: var(--sticky-header-background, #{$sticky-header-background});
+		font-weight: bold;
+		background:
+			linear-gradient(
+				to top,
+				var(--sticky-header-background-from, #{$sticky-header-background-body}) 30%,
+				var(--sticky-header-background-to, #{$body-bg}) 50%
+			);
+
+		.cui-pane & {
+			--sticky-header-background-from: #{$sticky-header-background-pane};
+			--sticky-header-background-to: #{$pane-background};
+		}
 	}
 }
 

src/scss/themes/fylr/components/_sticky-header.scss

@@ -121,44 +121,6 @@
 	}
 }
 
-// * Block Inline
-// - block-inline is used within base-config to lay out the block vertically in the 'inline' direction
-// - use when there is enough vertical space
-
-// .cui-block
-
-@mixin block-inline($content-indent: 200px, $content-max-width: 850px) {
-	--block-inline-content-indent: #{$content-indent};
-	--block-inline-content-max-width: #{$content-max-width};
-	--block-indent: 0;
-
-	@include media-breakpoint-up(lg) {
-		&:not(.cui-form-block--has-checkbox) {
-			> .cui-block-header {
-				margin-bottom: $block-margin;
-			}
-			
-			> .cui-block-content {
-				margin-left: var(--block-inline-content-indent);
-				max-width: var(--block-inline-content-max-width);
-			}
-		}
-	}
-
-	// nested
-	.cui-block {
-		--block-inline-content-indent: 0;
-	}
-
-	.cui-form-table {
-		@include block-separator-reset();
-	}
-
-	.cui-form {
-		@include form-key-value-stacked();
-	}
-}
-
 @mixin disable-block-bracket() {
 	&::before,
 	&::after {