From 6d6dc5141f535728029eef8735854a421bc08eba Mon Sep 17 00:00:00 2001
From: Tanuj Kanti <86398394+Tanujkanti4441@users.noreply.github.com>
Date: Wed, 26 Jul 2023 00:30:07 +0530
Subject: [PATCH] docs: fix overlapping of `open in playground` button (#17403)

* docs: fix overlapping of open play button

* docs: update px to rem

* docs: open play btn style change for mobile size
---
 docs/src/assets/scss/docs.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 98d6de83d45..3709a9cebf1 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -112,6 +112,10 @@ div.incorrect {
         offset-inline-end: -22px;
         offset-block-start: -22px;
     }
+
+    pre.line-numbers-mode {
+        padding-bottom: 4.5rem;
+    }
 }
 
 div.correct {
@@ -142,10 +146,8 @@ pre[class*="language-"] {
 .c-btn.c-btn--playground {
     position: absolute;
     font-size: var(--step--1);
-    bottom: -1rem;
+    bottom: 1rem;
     right: 1rem;
-    offset-block-end: 0.5rem;
-    offset-inline-end: 0.5rem;
     z-index: 1;
 
     @media all and (min-width: 768px) {
@@ -166,6 +168,7 @@ pre[class*="language-"] {
     position: fixed;
     right: 50px;
     bottom: 35px;
+    z-index: 1;
     font-size: 1.5rem;
     border-radius: 50%;
     color: var(--body-background-color);