diff --git a/webextensions/sidebar/drag-and-drop.js b/webextensions/sidebar/drag-and-drop.js index 6df0c2dcb..3558e2696 100644 --- a/webextensions/sidebar/drag-and-drop.js +++ b/webextensions/sidebar/drag-and-drop.js @@ -348,7 +348,7 @@ function getDropAction(event) { const onFaviconizedTab = targetTab.pinned && configs.faviconizePinnedTabs; const dropAreasCount = (info.draggedTab && onFaviconizedTab && !info.substanceTargetTab) ? 2 : 3 ; const targetTabRect = Scroll.getTabRect(targetTab); - const targetTabCoordinate = onFaviconizedTab ? (isRTL() ? targetTabRect.right : targetTabRect.left) : targetTabRect.top ; + const targetTabCoordinate = onFaviconizedTab ? targetTabRect.left : targetTabRect.top ; const targetTabSize = onFaviconizedTab ? targetTabRect.width : targetTabRect.height ; let beforeOrAfterDropAreaSize; if (dropAreasCount == 2) { @@ -369,13 +369,14 @@ function getDropAction(event) { after: `> ${targetTabCoordinate + targetTabSize - beforeOrAfterDropAreaSize}`, }); */ + const shouldInvertArea = onFaviconizedTab && isRTL(); if (eventCoordinate < targetTabCoordinate + beforeOrAfterDropAreaSize) { - info.dropPosition = kDROP_BEFORE; + info.dropPosition = shouldInvertArea ? kDROP_AFTER : kDROP_BEFORE; info.insertBefore = info.firstTargetTab; } else if (dropAreasCount == 2 || eventCoordinate > targetTabCoordinate + targetTabSize - beforeOrAfterDropAreaSize) { - info.dropPosition = kDROP_AFTER; + info.dropPosition = shouldInvertArea ? kDROP_BEFORE : kDROP_AFTER; info.insertAfter = info.lastTargetTab; } else { diff --git a/webextensions/sidebar/styles/drag-and-drop.css b/webextensions/sidebar/styles/drag-and-drop.css index 093cc80df..dfe30485f 100644 --- a/webextensions/sidebar/styles/drag-and-drop.css +++ b/webextensions/sidebar/styles/drag-and-drop.css @@ -50,13 +50,15 @@ tab-item:not(.faviconized)[data-drop-position="after"] tab-item-substance::befor right: 0; } -tab-item.faviconized[data-drop-position="before"] tab-item-substance::before { +:root:not(.rtl) tab-item.faviconized[data-drop-position="before"] tab-item-substance::before, +:root.rtl tab-item.faviconized[data-drop-position="after"] tab-item-substance::before { bottom: 0; left: 0; top: 0; } -tab-item.faviconized[data-drop-position="after"] tab-item-substance::before { +:root:not(.rtl) tab-item.faviconized[data-drop-position="after"] tab-item-substance::before, +:root.rtl tab-item.faviconized[data-drop-position="before"] tab-item-substance::before { bottom: 0; right: 0; top: 0;