From 94a5f0025f3f817888caebc7db10664c2d823888 Mon Sep 17 00:00:00 2001
From: Razvan <razwan.me@gmail.com>
Date: Wed, 18 May 2022 14:44:23 +0300
Subject: [PATCH] Improve dropcap resizing

---
 packages/block-library/src/blocks/supernova/frontend.js | 1 +
 packages/collection/src/frontend.js                     | 4 ++++
 packages/utils/src/index.js                             | 4 ++--
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/blocks/supernova/frontend.js b/packages/block-library/src/blocks/supernova/frontend.js
index 1851ff8bb..263ce3ab4 100644
--- a/packages/block-library/src/blocks/supernova/frontend.js
+++ b/packages/block-library/src/blocks/supernova/frontend.js
@@ -14,3 +14,4 @@ const debouncedResizeAllDropcaps = debounce( resizeAllDropcaps, 100 );
 domReady( resizeAllDropcaps );
 
 window.addEventListener( 'resize', debouncedResizeAllDropcaps );
+window.addEventListener( 'nb:layout', resizeAllDropcaps );
diff --git a/packages/collection/src/frontend.js b/packages/collection/src/frontend.js
index 0ae3c3c12..b39a24b14 100644
--- a/packages/collection/src/frontend.js
+++ b/packages/collection/src/frontend.js
@@ -193,6 +193,7 @@ const handleParametricGrid = ( $grid, $block, attributes ) => {
 }
 
 const handleGrids = ( selector ) => {
+
   $( selector ).each( function( i, grid ) {
     const $grid = $( grid );
     const $block = $grid.closest( '[data-layout-style]' );
@@ -210,4 +211,7 @@ const handleGrids = ( selector ) => {
       handleMasonryGrid( $grid, $block, attributes );
     }
   } );
+
+  const resize = new CustomEvent( 'nb:layout' );
+  window.dispatchEvent( resize );
 }
diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js
index 14afa63ce..b12a96fdf 100644
--- a/packages/utils/src/index.js
+++ b/packages/utils/src/index.js
@@ -379,10 +379,10 @@ export const resizeDropcap = dropcap => {
   const wrapper = dropcap.parentElement;
 
   const dropcapWidth = dropcap.offsetWidth;
-  const wrapperWidth = wrapper.offsetWidth;
+  const wrapperWidth = wrapper.offsetWidth * 0.9;
   const widthRatio = wrapperWidth / dropcapWidth;
   const dropcapHeight = dropcap.offsetHeight;
-  const wrapperHeight = wrapper.offsetHeight;
+  const wrapperHeight = wrapper.offsetHeight * 0.9;
   const heightRatio = wrapperHeight / dropcapHeight;
   const ratio = Math.min( widthRatio, heightRatio );