fix(Sheet): avoid content from rendering on top of sticky title/butto…

…ns (#1247) Issue: [Link](https://jira.tid.es/browse/WEB-2016)
Telefonica · Sep 30, 2024 · 21ce399 · 21ce399 · github-actions · Sep 30, 2024
1 parent b3eede9
commit 21ce399
Showing 1 changed file with 30 additions and 10 deletions.
diff --git a/src/sheet-common.css.ts b/src/sheet-common.css.ts
@@ -236,19 +236,39 @@ export const overlay = style([
 
 export const closingOverlay = style(overlayClosedStyle);
 
-export const stickyTitle = sprinkles({
- position: 'sticky',
- top: 0,
- background: skinVars.colors.background,
-});
+export const stickyTitle = style([
+ sprinkles({
+ position: 'sticky',
+ top: 0,
+ background: skinVars.colors.background,
+ }),
+ {
+ '@media': {
+ [mq.tabletOrSmaller]: {
+ zIndex: 1,
+ },
+ },
+ },
+]);
 
-export const stickyButtons = sprinkles({
- position: 'sticky',
- bottom: 0,
- background: skinVars.colors.background,
-});
+export const stickyButtons = style([
+ sprinkles({
+ position: 'sticky',
+ bottom: 0,
+ background: skinVars.colors.background,
+ }),
+ {
+ '@media': {
+ [mq.tabletOrSmaller]: {
+ zIndex: 1,
+ },
+ },
+ },
+]);
 
 export const bodyContent = style({
+ position: 'relative',
+ zIndex: 0,
  '@media': {
  [mq.desktopOrBigger]: {
  overflowY: 'auto',