From 88d1c194549b90654f1aa988ddee11794a776b6b Mon Sep 17 00:00:00 2001
From: Chris Walsh <christianywalsh@gmail.com>
Date: Thu, 28 Jul 2022 17:16:03 -0700
Subject: [PATCH] Fix graphical bugs when dragging

---
 components/pages/WebsiteList.js | 53 +++++++++++++++++----------------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index 07cc4107..12e2f7d9 100644
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
@@ -62,33 +62,36 @@ export default function WebsiteList({ websites, showCharts, limit }) {
       {changeOrderMode ? (
         <DragDropContext onDragEnd={handleWebsiteDrag}>
           <Droppable droppableId={dragId}>
-            {provided => (
-              <div {...provided.droppableProps} ref={provided.innerRef}>
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
+              >
                 {ordered.map(({ website_id, name, domain }, index) =>
                   index < limit ? (
-                    <div key={website_id} className={styles.website}>
-                      <Draggable
-                        key={website_id}
-                        draggableId={`${dragId}-${website_id}`}
-                        index={index}
-                      >
-                        {provided => (
-                          <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                          >
-                            <WebsiteChart
-                              websiteId={website_id}
-                              title={name}
-                              domain={domain}
-                              showChart={showCharts}
-                              showLink
-                            />
-                          </div>
-                        )}
-                      </Draggable>
-                    </div>
+                    <Draggable
+                      key={website_id}
+                      draggableId={`${dragId}-${website_id}`}
+                      index={index}
+                    >
+                      {provided => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          className={styles.website}
+                        >
+                          <WebsiteChart
+                            websiteId={website_id}
+                            title={name}
+                            domain={domain}
+                            showChart={changeOrderMode ? false : showCharts}
+                            showLink
+                          />
+                        </div>
+                      )}
+                    </Draggable>
                   ) : null,
                 )}
               </div>