Merge branch 'main' into focus-on-first-item-in-MH-dialog

openstax · Mar 5, 2025 · 7e25453 · 7e25453
2 parents 56efbb1 + 84f9d09
commit 7e25453
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   `}
 `;