Fix shifting of elements due to css transform scale in ExerciseList, …

public/index.html

@@ -15,6 +15,7 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <div id="drag-list-item"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/components/DragList.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import ReactDOM from "react-dom";
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
 // a little function to help us with reordering the result
@@ -10,6 +11,8 @@ const reorder = (list, startIndex, endIndex) => {
 	return result;
 };
 
+// portal for dragging items
+const portal = document.getElementById("drag-list-item");
 const grid = 8;
 
 const getItemStyle = (isDragging, draggableStyle) => ({
@@ -92,27 +95,19 @@ export default class DragList extends Component {
 						>
 							{this.state.items.map((item, index) => (
 								<Draggable key={item.id} draggableId={item.id} index={index}>
-									{(provided, snapshot) => (
-										<div
-											ref={provided.innerRef}
-											{...provided.draggableProps}
-											style={getItemStyle(
-												snapshot.isDragging,
-												provided.draggableProps.style
-											)}
-										>
-											<div style={{display:'flex',width:'95%'}} {...provided.dragHandleProps}
-												className="handler">
-												<img style={{ width: '1.5em', objectFit: 'contain' }}
-													src={require("../icons/exercise/reorder-drag.png")}
-													alt="handler"
-												></img>
-													<div style={getContentStyle}>
-												{item.content}
+									{(provided, snapshot) => {
+										const child = (
+											<div ref={provided.innerRef} {...provided.draggableProps} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}>
+												<div style={{ display: "flex", width: "95%" }} {...provided.dragHandleProps} className="handler">
+													<img style={{ width: "1.5em", objectFit: "contain" }} src={require("../icons/exercise/reorder-drag.png")} alt="handler"></img>
+													<div style={getContentStyle}>{item.content}</div>
 												</div>
 											</div>
-										</div>
-									)}
+										);
+										if (!snapshot.isDragging) return child;
+										// if dragging - put the item in a portal so parent css scale property won't afftect it
+										return ReactDOM.createPortal(child, portal);
+									}}
 								</Draggable>
 							))}
 							{provided.placeholder}

src/components/ExerciseListItem.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import ReactDOM from "react-dom";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import Exercise from "./Exercise";
 import "../css/ExerciseDragList.css";
@@ -11,6 +12,8 @@ const reorder = (list, startIndex, endIndex) => {
 	return result;
 };
 
+// portal for dragging items
+const portal = document.getElementById("drag-list-item");
 const grid = 12;
 
 const getItemStyle = (isDragging, draggableStyle) => ({
@@ -88,32 +91,34 @@ export default class ExerciseDragList extends Component {
 						>
 							{this.state.items.map((item, index) => (
 								<Draggable key={item.id} draggableId={item.id} index={index}>
-									{(provided, snapshot) => (
-										<div
-											ref={provided.innerRef}
-											{...provided.draggableProps}
-											style={getItemStyle(
-												snapshot.isDragging,
-												provided.draggableProps.style
-											)}
-											className='drag-exercise'
-										>
-											<div className='col-md-11 exercise-div draggable-exercise'>
-												<Exercise
-													onDelete={() => this.onDelete(this.state,this.props,item)}
-													onPlay={this.props.onPlay}
-													onEdit={this.props.onEdit}
-													isHost={this.props.isHost}
-													isShared={this.props.isShared}
-													onShare={this.props.onShare}
-													presenceResult={this.props.presenceResult}
-													inEditMode={this.props.inEditMode}
-													allowDraggable={provided.dragHandleProps}
-													{...item}
-												/>
+									{(provided, snapshot) => {
+										const child = (
+											<div
+												ref={provided.innerRef}
+												{...provided.draggableProps}
+												style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+												className="drag-exercise"
+											>
+												<div className="col-md-11 exercise-div draggable-exercise">
+													<Exercise
+														onDelete={() => this.onDelete(this.state, this.props, item)}
+														onPlay={this.props.onPlay}
+														onEdit={this.props.onEdit}
+														isHost={this.props.isHost}
+														isShared={this.props.isShared}
+														onShare={this.props.onShare}
+														presenceResult={this.props.presenceResult}
+														inEditMode={this.props.inEditMode}
+														allowDraggable={provided.dragHandleProps}
+														{...item}
+													/>
+												</div>
 											</div>
-										</div>
-									)}
+										);
+										if (!snapshot.isDragging) return child;
+										// if dragging - put the item in a portal so parent css scale property won't afftect it
+										return ReactDOM.createPortal(child, portal);
+									}}
 								</Draggable>
 							))}
 							{provided.placeholder}

src/containers/Players/MatchingPlayer.js

@@ -97,7 +97,13 @@ class MATCHING_PAIRPLAYER extends Component {
 	}
 
 	componentDidUpdate(prevProps) {
-		if (prevProps.inFullscreenMode !== this.props.inFullscreenMode) this.repaintInstance();
+		if (prevProps.inFullscreenMode !== this.props.inFullscreenMode) {
+			this.repaintInstance();
+			const toolbarHeight = 55;
+			const increase = this.props.inFullscreenMode ? toolbarHeight / window.innerHeight : 0;
+			const scale = (1 + increase).toFixed(2);
+			this.instance.setZoom(scale);
+		}
 	}
 
 	repaintInstance() {