fix: replace usage of getComputedStyle to calculate margins of content container

client/themes/tyclipso/components/page.vue

@@ -186,6 +186,7 @@
                   span {{$t('common:page.printFormat')}}
                 v-spacer
 
+          v-flex.ty-content-wrapper.pa-0
             v-flex.page-col-content.ty-max-width.px-md-6.px-lg-12(xs12, lg9, xl10)
               v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions')
                 template(v-slot:activator='{ on: onEditActivator }')

client/themes/tyclipso/plugins/prism.js

@@ -7,7 +7,7 @@ export default function initializePrism() {
     'remove-trailing': true,
     'remove-indent': true,
     'left-trim': true,
-    'right-trim': true,
+    //'right-trim': true,
     'remove-initial-line-feed': true,
     'tabs-to-spaces': 2
   })
@@ -55,16 +55,30 @@ function expandButton() {
   Prism.plugins.toolbar.registerButton('expand', env => {
     let expanded = false
     const codeBlock = env.element.closest('.code-toolbar')
-    const container = env.element.closest('.page-col-content.ty-max-width')
 
-    const applyInlineStyles = (marginLeft, width) => {
+    const getExpandedStyle = () => {
+      const contentWrapper = env.element.closest('.ty-content-wrapper')
+      const content = env.element.closest('.page-col-content')
+      const innerContent = env.element.closest('.contents')
+
+      const contentMargin = contentWrapper.offsetWidth - content.offsetWidth
+      const contentPadding = content.offsetWidth - innerContent.offsetWidth
+
+      return {
+        width: `${contentWrapper.offsetWidth - contentPadding}px`,
+        marginLeft: `-${(contentMargin) / 2}px`,
+      }
+    }
+
+    const updateInlineStyle = () => {
       codeBlock.style.width = `${codeBlock.closest('.contents').offsetWidth}px`
       codeBlock.style.marginLeft = '0px'
 
       if (expanded) {
         window.requestAnimationFrame(() => {
-          codeBlock.style.marginLeft = `${marginLeft}px`
-          codeBlock.style.width = `${width}px`
+          const style = getExpandedStyle()
+          codeBlock.style.marginLeft = style.marginLeft
+          codeBlock.style.width = style.width
         })
       } else {
         setTimeout(() => {
@@ -73,25 +87,13 @@ function expandButton() {
       }
     }
 
-    const recalculateWidth = () => {
-      const containerMargin = parseFloat(window.getComputedStyle(container).marginLeft)
-      const containerPadding = parseFloat(window.getComputedStyle(container).paddingLeft)
-
-      // compute expanded size
-      const expandedWidth = container.offsetWidth - containerPadding * 2 + containerMargin * 2;
-
-      // apply inline styles to code block
-      applyInlineStyles(-containerMargin, expandedWidth)
-    }
-
     const expandButton = document.createElement('button')
-
     expandButton.innerHTML = expandIcon
 
     expandButton.addEventListener('click', () => {
       expanded = !expanded
 
-      recalculateWidth()
+      updateInlineStyle()
 
       // switch icon
       expandButton.innerHTML = expanded ? collapseIcon : expandIcon
@@ -99,7 +101,7 @@ function expandButton() {
       document.activeElement.blur()
     })
 
-    window.addEventListener('resize', recalculateWidth)
+    window.addEventListener('resize', updateInlineStyle)
 
     return expandButton
   })