docs: resize playground when window size changes

Author: pboth1304

docs/playground/Playground.vue

@@ -107,19 +107,56 @@ const SCROLL_CONTAINER_ID = 'scroll-container';
 
 const { editorSize, ifexViewerSize, startResizing } = useEditorResizing(codemirrorInstance);
 
+const calculateSizes = () => {
+  const parentElement = document.getElementById(SCROLL_CONTAINER_ID)?.parentElement;
+  if (parentElement) {
+    const parentWidth = parentElement.offsetWidth;
+    const totalGap = 70; // Total gap/padding (35px each side)
+    const availableWidth = parentWidth - totalGap;
+    
+    // If sizes haven't been set yet, use 50/50 split
+    if (editorSize.value === 0 && ifexViewerSize.value === 0) {
+      editorSize.value = availableWidth / 2;
+      ifexViewerSize.value = availableWidth / 2;
+    } else {
+      // Maintain the current ratio when resizing
+      const currentTotal = editorSize.value + ifexViewerSize.value;
+      if (currentTotal > 0) {
+        const editorRatio = editorSize.value / currentTotal;
+        editorSize.value = availableWidth * editorRatio;
+        ifexViewerSize.value = availableWidth * (1 - editorRatio);
+      } else {
+        // Fallback to 50/50 if something went wrong
+        editorSize.value = availableWidth / 2;
+        ifexViewerSize.value = availableWidth / 2;
+      }
+    }
+  }
+};
+
+let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+const handleWindowResize = () => {
+  // Debounce the resize calculation to avoid excessive recalculations
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  resizeTimeout = setTimeout(() => {
+    calculateSizes();
+    resizeTimeout = null;
+  }, 100);
+};
+
 onMounted(() => {
   // Workaround for lazy loading web components in SSR
   import('../../dist/ifex-viewer.es.js').then(() => {
     mounted.value = true;
   });
 
-  const parentElement = document.getElementById(SCROLL_CONTAINER_ID)?.parentElement;
-  if (parentElement) {
-    const parentWidth = parentElement.offsetWidth;
-    editorSize.value = parentWidth / 2 - 35; // 50% - 2rem (32px) - 3px
-
-    ifexViewerSize.value = parentWidth / 2 - 35; // 50% - 2rem (32px) - 3px
-  }
+  calculateSizes();
+  
+  // Add window resize listener
+  window.addEventListener('resize', handleWindowResize);
 
   const initialEditorState = EditorState.create({
     doc: simpleSpecificationMock,
@@ -151,6 +188,15 @@ onBeforeUnmount(() => {
   if (view.value) {
     view.value.destroy();
   }
+  
+  // Remove window resize listener
+  window.removeEventListener('resize', handleWindowResize);
+  
+  // Clear any pending resize timeout
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = null;
+  }
 });
 
 watch(errorMap, newErrorMap => {

docs/playground/composables/use-editor-resizing.ts

@@ -34,6 +34,7 @@ export const useEditorResizing = (codemirrorInstance: Readonly<ShallowRef<HTMLEl
 
     const { left } = codemirrorInstance.value.getBoundingClientRect();
     const containerWidth = container.offsetWidth;
+    const totalGap = 70; // Total gap/padding (35px each side)
 
     // Calculate the initial offset only on the first resize event
     // This should be the difference between mouse position and current editor right edge
@@ -47,13 +48,13 @@ export const useEditorResizing = (codemirrorInstance: Readonly<ShallowRef<HTMLEl
     // Ensure the sizes remain within bounds (accounting for minimum sizes and gaps)
     const minEditorSize = 200; // Minimum editor width
     const minViewerSize = 200; // Minimum viewer width
-    const totalGap = 70; // Total gap/padding (35px each side)
+    const availableWidth = containerWidth - totalGap;
 
-    if (newEditorSize >= minEditorSize && containerWidth - newEditorSize - totalGap >= minViewerSize) {
+    if (newEditorSize >= minEditorSize && availableWidth - newEditorSize >= minViewerSize) {
       editorSize.value = newEditorSize;
 
       // Calculate and set the width of the ifex-viewer
-      ifexViewerSize.value = containerWidth - newEditorSize - totalGap;
+      ifexViewerSize.value = availableWidth - newEditorSize;
     }
   };