Fixed an issue with right-side panels getting cut off after stretchin…

…g them and shrinking back with the resize handle (#263)

.changeset/famous-cats-play.md

@@ -0,0 +1,5 @@
+---
+'xstate-viz-app': patch
+---
+
+Fixed an issue with right-side panels getting cut off after stretching them and shrinking back with the resize handle.

cypress/integration/visual.spec.ts

@@ -32,6 +32,24 @@ describe('Visual', () => {
     });
   });
 
+  it('should have login button in the viewport after the right panel gets stretched and shrinked again', () => {
+    cy.visit('/viz');
+
+    cy.getMonacoEditor();
+
+    cy.getResizeHandle().realSwipe('toLeft', {
+      length: 100,
+    });
+
+    cy.getResizeHandle().realSwipe('toRight', {
+      length: 100,
+    });
+
+    cy.findByRole('button', { name: 'Login' }).then(($button) => {
+      expect(isInViewport($button)).to.be.true;
+    });
+  });
+
   it('should have editor buttons aligned vertically with canvas buttons', () => {
     cy.visit('/viz');
 

cypress/support/commands.ts

@@ -174,6 +174,10 @@ const getControlButtons = () => {
   return cy.findByTestId('controls');
 };
 
+const getResizeHandle = () => {
+  return cy.findByTestId('resize-handle');
+};
+
 type DeepPartial<T> = T extends Function
   ? T
   : T extends Array<infer U>
@@ -220,6 +224,8 @@ declare global {
       getCanvasGraph: typeof getCanvasGraph;
 
       getControlButtons: typeof getControlButtons;
+
+      getResizeHandle: typeof getResizeHandle;
     }
   }
 }
@@ -236,3 +242,4 @@ Cypress.Commands.add('getCanvasHeader', getCanvasHeader);
 Cypress.Commands.add('getStatePanel', getStatePanel);
 Cypress.Commands.add('getCanvasGraph', getCanvasGraph);
 Cypress.Commands.add('getControlButtons', getControlButtons);
+Cypress.Commands.add('getResizeHandle', getResizeHandle);

src/EditorPanel.tsx

@@ -140,12 +140,13 @@ const editorPanelMachine = editorPanelModel.createMachine(
               src: async (ctx) => {
                 const monaco = ctx.monacoRef!;
                 const uri = monaco.Uri.parse(ctx.mainFile);
-                const getWorker = await monaco.languages.typescript.getTypeScriptWorker();
+                const getWorker =
+                  await monaco.languages.typescript.getTypeScriptWorker();
                 const tsWorker = await getWorker(uri);
 
-                const usedXStateGistIdentifiers: string[] = await (tsWorker as any).queryXStateGistIdentifiers(
-                  uri.toString(),
-                );
+                const usedXStateGistIdentifiers: string[] = await (
+                  tsWorker as any
+                ).queryXStateGistIdentifiers(uri.toString());
 
                 if (usedXStateGistIdentifiers.length > 0) {
                   const fixupImportsText = buildGistFixupImportsText(
@@ -436,7 +437,7 @@ export const EditorPanel: React.FC<{
         {simulationMode === 'visualizing' && (
           <>
             {/* This extra div acts as a placeholder that is supposed to stretch while EditorWithXStateImports lazy-loads (thanks to `1fr` on the grid) */}
-            <div style={{ minHeight: 0 }}>
+            <div style={{ minHeight: 0, minWidth: 0 }}>
               <EditorWithXStateImports
                 value={value}
                 onMount={(standaloneEditor, monaco) => {

src/ResizableBox.tsx

@@ -64,6 +64,7 @@ const ResizeHandle: React.FC<{
 
   return (
     <Box
+      data-testid="resize-handle"
       width="1"
       css={{
         position: 'absolute',
@@ -100,6 +101,9 @@ const ResizeHandle: React.FC<{
       onPointerUp={() => {
         send(dragDropModel.events['DRAG.END']());
       }}
+      onPointerCancel={() => {
+        send(dragDropModel.events['DRAG.END']());
+      }}
     ></Box>
   );
 };
@@ -120,9 +124,11 @@ export const ResizableBox: React.FC<ResizableBoxProps> = ({
     // into multiple lines
     <Box
       {...props}
-      {...(!disabled && {
-        width: `clamp(35rem, calc(35rem + ${widthDelta}px), 70vw)`,
-      })}
+      style={
+        !disabled
+          ? { width: `clamp(35rem, calc(35rem + ${widthDelta}px), 70vw)` }
+          : undefined
+      }
     >
       {children}
       {!disabled && <ResizeHandle onChange={(value) => setWidthDelta(value)} />}