From 64bedb86c18850245e68221eeceeee8a289233bc Mon Sep 17 00:00:00 2001
From: susanev <susan.ra.evans@gmail.com>
Date: Thu, 8 Jun 2023 10:01:32 -0700
Subject: [PATCH] fix up copy buttons

Signed-off-by: susanev <susan.ra.evans@gmail.com>
---
 themes/default/assets/css/bundle.css          |  55 +++++++---
 .../default/theme/src/scss/_copy-button.scss  | 100 ++++++++++++------
 .../theme/src/scss/components/_choosable.scss |   4 -
 3 files changed, 109 insertions(+), 50 deletions(-)

diff --git a/themes/default/assets/css/bundle.css b/themes/default/assets/css/bundle.css
index bd65a99c0a0..0a4477498f9 100644
--- a/themes/default/assets/css/bundle.css
+++ b/themes/default/assets/css/bundle.css
@@ -2780,8 +2780,19 @@ div.highlight.line-numbers pre.chroma code span.line::before{
   }
 }
 
-.copy-button-container{
-  margin:9px 7px 0 0;
+div.highlight{
+  display:flex
+}
+
+div.highlight pre,div.highlight div.copy-button-container{
+  flex:1
+}
+
+div.highlight .copy-button-container{
+  display:none;
+  flex-direction:row;
+  width:fit-content;
+  margin:5px 3px 0 0;
   background:#4d5bd9;
   box-shadow:0px 0px 12px #364098;
   border-radius:4px;
@@ -2791,38 +2802,60 @@ div.highlight.line-numbers pre.chroma code span.line::before{
   right:0
 }
 
-.copy-button-container:hover{
+div.highlight .copy-button-container i.copy{
+  display:none
+}
+
+div.highlight .copy-button-container:hover{
   background:#4552c3;
   box-shadow:0px 0px 12px #364098
 }
 
-.copy-button-container:active{
+div.highlight .copy-button-container:active{
   background:#4d5bd9;
   box-shadow:0px 0px 12px #364098
 }
 
-.code-mode-dark .copy-button-container{
+.code-mode-dark div.highlight .copy-button-container{
   background:#4d5bd9
 }
 
-.copy-button-container pulumi-tooltip .tooltip-content{
+div.highlight .copy-button-container button.copy-button{
+  display:flex;
+  align-items:center;
+  gap:4px
+}
+
+div.highlight .copy-button-container pulumi-tooltip .tooltip-content{
   width: auto;
   white-space: nowrap
 }
 
-.copy-button{
+@media(min-width: 768px){
+  div.highlight .copy-button-container{
+    display:flex
+  }
+}
+
+@media(min-width: 1024px){
+  div.highlight .copy-button-container i.copy{
+    display:flex
+  }
+}
+
+div.highlight .copy-button{
   transition:all 120ms linear;
   color:#fff;
   font-size:12px;
   font-family:"Inter"
 }
 
-.code-mode-dark .copy-button{
+.code-mode-dark div.highlight .copy-button{
   --tw-text-opacity: 1;
   color: rgba(142, 143, 151, var(--tw-text-opacity))
 }
 
-.code-mode-dark .copy-button:hover{
+.code-mode-dark div.highlight .copy-button:hover{
   --tw-text-opacity: 1;
   color: rgba(190, 191, 201, var(--tw-text-opacity))
 }
@@ -19997,10 +20030,6 @@ pulumi-choosable>div:first-child:not(.active){
   display:none
 }
 
-pulumi-choosable pre.chroma{
-  margin-top: 0px
-}
-
 .no-copy pulumi-choosable .copy-button-container{
   display:none
 }
diff --git a/themes/default/theme/src/scss/_copy-button.scss b/themes/default/theme/src/scss/_copy-button.scss
index 75aaea5c6aa..2fbbc4136fe 100644
--- a/themes/default/theme/src/scss/_copy-button.scss
+++ b/themes/default/theme/src/scss/_copy-button.scss
@@ -1,50 +1,84 @@
 @import "mixins";
 
-.copy-button-container {
-    margin: 9px 7px 0 0;
-    background: #4d5bd9;
-    
-    box-shadow: 0px 0px 12px #364098;
-    border-radius: 4px;
-    padding: 3px 7px 5px 7px;
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    &:hover {
-        background: #4552c3;
-        box-shadow: 0px 0px 12px #364098;
+div.highlight {
+    display: flex;
+
+    pre,
+    div.copy-button-container {
+        flex: 1;
     }
 
-    &:active {
+
+    .copy-button-container {
+        display: none;
+
+        i.copy {
+            display: none;
+        }
+
+        flex-direction: row;
+        width: fit-content;
+        margin: 5px 3px 0 0;
         background: #4d5bd9;
+        
         box-shadow: 0px 0px 12px #364098;
-    }
+        border-radius: 4px;
+        padding: 3px 7px 5px 7px;
+        position: absolute;
+        top: 0;
+        right: 0;
 
+        &:hover {
+            background: #4552c3;
+            box-shadow: 0px 0px 12px #364098;
+        }
 
-    .code-mode-dark & {
-        background: #4d5bd9;
-    }
+        &:active {
+            background: #4d5bd9;
+            box-shadow: 0px 0px 12px #364098;
+        }
 
-    // Use a slightly narrower tooltip for these.
-    pulumi-tooltip {
-        .tooltip-content {
-            @apply w-auto whitespace-nowrap;
+
+        .code-mode-dark & {
+            background: #4d5bd9;
+        }
+
+        button.copy-button {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        // Use a slightly narrower tooltip for these.
+        pulumi-tooltip {
+            .tooltip-content {
+                @apply w-auto whitespace-nowrap;
+            }
+        }
+
+        @media (min-width: 768px) {
+            display: flex;
+        }
+
+        @media(min-width: 1024px) {
+            i.copy {
+                display: flex;
+            }
         }
     }
-}
 
-.copy-button {
-    @include transition;
-    color: #fff;
-    font-size: 12px;
-    font-family: 'Inter';
+    .copy-button {
+        @include transition;
+        color: #fff;
+        font-size: 12px;
+        font-family: 'Inter';
 
-    .code-mode-dark & {
-        @apply text-gray-600;
+        .code-mode-dark & {
+            @apply text-gray-600;
 
-        &:hover {
-            @apply text-gray-500;
+            &:hover {
+                @apply text-gray-500;
+            }
         }
     }
 }
diff --git a/themes/default/theme/src/scss/components/_choosable.scss b/themes/default/theme/src/scss/components/_choosable.scss
index d8992949ba5..2f71aaa8b73 100644
--- a/themes/default/theme/src/scss/components/_choosable.scss
+++ b/themes/default/theme/src/scss/components/_choosable.scss
@@ -10,10 +10,6 @@ pulumi-choosable {
     // override this behavior, just apply the local Tailwind utility class "inline".
     display: block;
 
-    pre.chroma {
-        @apply mt-0;
-    }
-
     .copy-button-container {
         .no-copy & {
             display: none;