From a6169a80a9ff2c2490d10d83d74ffd6bec0bc31c Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Sun, 3 Apr 2022 15:19:05 +0200
Subject: [PATCH] Fix element position when dragged in homepage customizer

---
 ui/component/homepageSort/view.jsx   |  3 ++-
 ui/scss/component/homepage-sort.scss | 10 ++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/component/homepageSort/view.jsx b/ui/component/homepageSort/view.jsx
index 07f3e547d..3068eaa10 100644
--- a/ui/component/homepageSort/view.jsx
+++ b/ui/component/homepageSort/view.jsx
@@ -122,7 +122,8 @@ export default function HomepageSort(props: Props) {
             // $FlowFixMe
             draggableProvided.draggableProps.style.left = draggedItemRef.offsetLeft;
             // $FlowFixMe
-            draggableProvided.draggableProps.style.top = draggedItemRef.offsetTop;
+            // draggableProvided.draggableProps.style.top = draggedItemRef.offsetTop;
+            draggableProvided.draggableProps.style.top = draggableProvided.draggableProps.style.top - 50;
           }
           return (
             <div
diff --git a/ui/scss/component/homepage-sort.scss b/ui/scss/component/homepage-sort.scss
index 54d429a43..96e1daacf 100644
--- a/ui/scss/component/homepage-sort.scss
+++ b/ui/scss/component/homepage-sort.scss
@@ -9,18 +9,19 @@
   background-color: var(--color-ads-background);
   padding: var(--spacing-s);
   margin-right: var(--spacing-s);
-  border: 1px solid var(--color-border);
   overflow: auto;
   overflow-x: hidden;
+  border-radius: var(--border-radius);
+  outline: 1px solid var(--color-border);
 }
 
 .homepage-sort__bin--dashed {
-  border: dashed var(--color-border);
+  outline: dashed var(--color-border);
 }
 
 .homepage-sort__bin--highlight {
-  border-color: var(--color-primary);
-  border-width: 2px;
+  outline-color: var(--color-primary);
+  outline-width: 2px;
 }
 
 .homepage-sort__bin--no-bg {
@@ -42,6 +43,7 @@
   padding: var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--spacing-m);
   align-items: center;
   font-size: var(--font-small);
+  border-radius: var(--border-radius);
 
   svg {
     margin-top: var(--spacing-xxs);