From e704d7562705c07db830cbdd8519df05ef60a5ab Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Wed, 9 Jun 2021 17:51:04 +0200
Subject: [PATCH] feat(home): add chevron correction for featured shelf

---
 src/components/Shelf/Shelf.module.scss       | 10 ++++++++++
 src/components/Shelf/Shelf.tsx               |  5 ++++-
 src/components/TileDock/TileDock.module.scss |  7 -------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
index 53e8cae45..4d5f5a192 100644
--- a/src/components/Shelf/Shelf.module.scss
+++ b/src/components/Shelf/Shelf.module.scss
@@ -47,6 +47,16 @@
       transform: none;
     }
   }
+  &.featuredLeftCorrection {
+    position: absolute;
+    left: calc(0px - 100vw * 0.2 + 56px);
+    top: -30px;
+  }
+  &.featuredRightCorrection {
+    position: absolute;
+    top: -30px;
+    right: calc(0px - 100vw * 0.2 + 56px);
+  }
 }
 .error {
   color: var(--card-color);
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
index b24bc2d86..0e88a2e2c 100644
--- a/src/components/Shelf/Shelf.tsx
+++ b/src/components/Shelf/Shelf.tsx
@@ -71,6 +71,7 @@ const Shelf: React.FC<ShelfProps> = ({
           <div
             className={classNames(styles.chevron, {
               [styles.disabled]: !didSlideBefore,
+              [styles.featuredLeftCorrection]: featured && isLargeScreen,
             })}
             role="button"
             tabIndex={didSlideBefore ? 0 : -1}
@@ -85,7 +86,9 @@ const Shelf: React.FC<ShelfProps> = ({
         )}
         renderRightControl={(doSlide) => (
           <div
-            className={classNames(styles.chevron)}
+            className={classNames(styles.chevron, {
+              [styles.featuredRightCorrection]: featured && isLargeScreen,
+            })}
             role="button"
             tabIndex={0}
             aria-label="Slide right"
diff --git a/src/components/TileDock/TileDock.module.scss b/src/components/TileDock/TileDock.module.scss
index 97f007b74..29b5c56a5 100644
--- a/src/components/TileDock/TileDock.module.scss
+++ b/src/components/TileDock/TileDock.module.scss
@@ -14,13 +14,6 @@
   list-style-type: none;
   white-space: normal;
 }
-.tileDock .offsetTile {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
 .tileDock .leftControl {
   left: -40px;
   position: absolute;