Merge branch 'master' into aarav_edit

1 files changed, 24 insertions, 4 deletions

diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index fe4f0b1a2..3d6942e6f 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -40,7 +40,8 @@
     max-height: 100%;
     pointer-events: inherit;
     background: transparent;
-    z-index: -10000;
+    z-index: 0;
+    // z-index: -10000; // bcz: not sure why this was here.  it broke dropping images on the image box alternate bullseye icon.
 
     img {
         height: auto;
@@ -103,6 +104,10 @@
     margin: 0 auto;
     display: flex;
     height: 100%;
+    img {
+        object-fit: contain;
+        height: 100%;
+    }
 
     .imageBox-fadeBlocker,
     .imageBox-fadeBlocker-hover {
@@ -122,6 +127,7 @@
         }
     }
 }
+.imageBox-regenerateDropTarget,
 .imageBox-alternateDropTarget {
     position: absolute;
     color: white;
@@ -129,7 +135,19 @@
     right: 0;
     bottom: 0;
     z-index: 2;
+    transform-origin: bottom right;
     cursor: default;
+    > svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+.imageBox-regenerateDropTarget {
+    right: 30;
+    border-radius: 50%;
+    svg {
+        border-radius: 50%;
+    }
 }
 
 .imageBox-fader img {
@@ -182,8 +200,9 @@
         flex-direction: row;
         gap: 5px;
         width: 100%;
+        padding: 0 10;
         .imageBox-aiView-regenerate-createBtn {
-            max-width: 10%;
+            max-width: 20%;
             .button-container {
                 width: 100% !important;
                 justify-content: left !important;
@@ -194,7 +213,7 @@
     .imageBox-aiView-firefly {
         overflow: hidden;
         text-overflow: ellipsis;
-        max-width: 10%;
+        max-width: 15%;
         width: 100%;
     }
     .imageBox-aiView-regenerate-send {
@@ -205,7 +224,7 @@
         text-align: center;
         align-items: center;
         display: flex;
-        max-width: 25%;
+        max-width: 90%;
         width: 100%;
         .imageBox-aiView-similarity {
             max-width: 65;
@@ -223,5 +242,6 @@
         text-overflow: ellipsis;
         max-width: 65%;
         width: 100%;
+        color: black;
     }
 }