From 84f9d09bc08478525d83597397c56253c75ff39b Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 5 Mar 2025 11:04:38 -0600
Subject: [PATCH] Keep login nudge on-screen (#2436)

* Keep login nudge on-screen

[CORE-575]

* Simplify right placement

* Confirmation placement follows EditCard

* Update snapshots
---
 .../highlights/components/Confirmation.tsx    |  5 ++---
 .../__snapshots__/Card.spec.tsx.snap          | 21 +++++++++++--------
 .../__snapshots__/Confirmation.spec.tsx.snap  |  7 ++++---
 .../highlights/components/cardStyles.ts       |  7 ++++---
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/app/content/highlights/components/Confirmation.tsx b/src/app/content/highlights/components/Confirmation.tsx
index 8a93f70f94..83ed8d8eef 100644
--- a/src/app/content/highlights/components/Confirmation.tsx
+++ b/src/app/content/highlights/components/Confirmation.tsx
@@ -17,15 +17,14 @@ export const Overlay = styled.div`
   outline: none;
   ${cardBorder}
   transition: background 200ms;
-  position: absolute;
   display: flex;
   flex-direction: column;
   padding: 1.6rem;
-  top: 0;
-  left: 0;
   overflow: visible;
   min-height: 100%;
   min-width: 100%;
+  position: static;
+  width: min-content;
 
   label {
     ${labelStyle}
diff --git a/src/app/content/highlights/components/__snapshots__/Card.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/Card.spec.tsx.snap
index 0c182bfb16..4b1662d209 100644
--- a/src/app/content/highlights/components/__snapshots__/Card.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/Card.spec.tsx.snap
@@ -10,10 +10,11 @@ exports[`Card matches snapshot when focused without note 1`] = `
   padding: 0.8rem;
   border-radius: 0.4rem;
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0 rgba(0,0,0,0.2);
-  left: calc(100% - ((100% - 82.5rem) / 2) + 3rem);
-  right: unset;
+  left: unset;
+  right: 0;
   top: 150px;
-  left: calc(100% - ((100% - 82.5rem) / 2) + 1rem);
+  left: calc(50% + (82.5rem / 2) + 1rem);
+  right: unset;
   -webkit-transition: opacity 0.3s,top 0.3s,left 0.3s;
   transition: opacity 0.3s,top 0.3s,left 0.3s;
 }
@@ -128,10 +129,11 @@ exports[`Card matches snapshot when passed data without note 1`] = `
   padding: 0.8rem;
   border-radius: 0.4rem;
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0 rgba(0,0,0,0.2);
-  left: calc(100% - ((100% - 82.5rem) / 2) + 3rem);
-  right: unset;
+  left: unset;
+  right: 0;
   top: undefinedpx;
-  left: calc(100% - ((100% - 82.5rem) / 2) + 1rem);
+  left: calc(50% + (82.5rem / 2) + 1rem);
+  right: unset;
   -webkit-transition: opacity 0.3s,top 0.3s,left 0.3s;
   transition: opacity 0.3s,top 0.3s,left 0.3s;
 }
@@ -221,10 +223,11 @@ exports[`Card matches snapshot without data 1`] = `
   padding: 0.8rem;
   border-radius: 0.4rem;
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0 rgba(0,0,0,0.2);
-  left: calc(100% - ((100% - 82.5rem) / 2) + 3rem);
-  right: unset;
+  left: unset;
+  right: 0;
   top: 200px;
-  left: calc(100% - ((100% - 82.5rem) / 2) + 1rem);
+  left: calc(50% + (82.5rem / 2) + 1rem);
+  right: unset;
   -webkit-transition: opacity 0.3s,top 0.3s,left 0.3s;
   transition: opacity 0.3s,top 0.3s,left 0.3s;
 }
diff --git a/src/app/content/highlights/components/__snapshots__/Confirmation.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/Confirmation.spec.tsx.snap
index d4f32d52e2..97b8ba6ca7 100644
--- a/src/app/content/highlights/components/__snapshots__/Confirmation.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/Confirmation.spec.tsx.snap
@@ -96,7 +96,6 @@ exports[`Confirmation matches snapshot no selection 1`] = `
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0 rgba(0,0,0,0.2);
   -webkit-transition: background 200ms;
   transition: background 200ms;
-  position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -105,11 +104,13 @@ exports[`Confirmation matches snapshot no selection 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   padding: 1.6rem;
-  top: 0;
-  left: 0;
   overflow: visible;
   min-height: 100%;
   min-width: 100%;
+  position: static;
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
 }
 
 .c0 label {
diff --git a/src/app/content/highlights/components/cardStyles.ts b/src/app/content/highlights/components/cardStyles.ts
index 5caf2155fd..32250fc115 100644
--- a/src/app/content/highlights/components/cardStyles.ts
+++ b/src/app/content/highlights/components/cardStyles.ts
@@ -60,11 +60,12 @@ const overlapDisplay = css`
 `;
 
 const rightSideDisplay = css`
-  left: calc(100% - ((100% - ${contentTextWidth}rem) / 2) + ${cardContentMargin}rem);
-  right: unset;
+  left: unset;
+  right: 0;
   top: ${(props: CardProps) => `${props.topOffset || getHighlightBottomOffset(props.container, props.highlight)}px;`}
   ${(props: CardProps) => !!props.isActive && css`
-    left: calc(100% - ((100% - ${contentTextWidth}rem) / 2) + ${cardFocusedContentMargin}rem);
+    left: calc(50% + (${contentTextWidth}rem / 2) + ${cardFocusedContentMargin}rem);
+    right: unset;
   `}
 `;