fix(popup): subtract margins when calculating max popup size

tobyzerner · Oct 12, 2023 · f842b6d · f842b6d
1 parent f7b5450
commit f842b6d
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/src/popup/popup.ts b/src/popup/popup.ts
@@ -166,15 +166,23 @@ export default class PopupElement extends HTMLElement {
                         shift(),
                         flip(),
                         size({
-                            apply: ({ availableWidth, availableHeight }) => {
+                            apply: ({
+                                availableWidth,
+                                availableHeight,
+                                placement,
+                            }) => {
+                                this.content.dataset.placement = placement;
+
                                 Object.assign(this.content.style, {
                                     maxWidth: '',
                                     maxHeight: '',
                                 });
 
                                 const computed = getComputedStyle(this.content);
 
-                                // TODO: subtract margins
+                                availableWidth -=
+                                    parseInt(computed.marginLeft) +
+                                    parseInt(computed.marginRight);
 
                                 if (
                                     computed.maxWidth === 'none' ||
@@ -183,6 +191,10 @@ export default class PopupElement extends HTMLElement {
                                     this.content.style.maxWidth = `${availableWidth}px`;
                                 }
 
+                                availableHeight -=
+                                    parseInt(computed.marginTop) +
+                                    parseInt(computed.marginBottom);
+
                                 if (
                                     computed.maxHeight === 'none' ||
                                     availableHeight <
@@ -193,12 +205,11 @@ export default class PopupElement extends HTMLElement {
                             },
                         }),
                     ],
-                }).then(({ x, y, placement }) => {
+                }).then(({ x, y }) => {
                     Object.assign(this.content.style, {
                         left: `${x}px`,
                         top: `${y}px`,
                     });
-                    this.content.dataset.placement = placement;
                 });
             },
             { ancestorScroll: false }