--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -1643,17 +1643,18 @@ CustomizeMode.prototype = {
     }
     return this.__dir;
   },
 
   _onDragStart(aEvent) {
     __dumpDragData(aEvent);
     let item = aEvent.target;
     while (item && item.localName != "toolbarpaletteitem") {
-      if (item.localName == "toolbar") {
+      if (item.localName == "toolbar" || item.id == kPaletteId ||
+          item.id == "customization-panelHolder") {
         return;
       }
       item = item.parentNode;
     }
 
     let draggedItem = item.firstChild;
     let placeForItem = CustomizableUI.getPlaceForItem(item);
 
@@ -1683,16 +1684,18 @@ CustomizeMode.prototype = {
         let canUsePrevSibling = placeForItem == "toolbar" || placeForItem == "panel";
         if (item.nextSibling) {
           this._setDragActive(item.nextSibling, "before", draggedItem.id, placeForItem);
           this._dragOverItem = item.nextSibling;
         } else if (canUsePrevSibling && item.previousSibling) {
           this._setDragActive(item.previousSibling, "after", draggedItem.id, placeForItem);
           this._dragOverItem = item.previousSibling;
         }
+        let currentArea = this._getCustomizableParent(item);
+        currentArea.setAttribute("draggingover", "true");
       }
       this._initializeDragAfterMove = null;
       this.window.clearTimeout(this._dragInitializeTimeout);
     };
     this._dragInitializeTimeout = this.window.setTimeout(this._initializeDragAfterMove, 0);
   },
 
   _onDragOver(aEvent, aOverrideTarget) {
@@ -1791,16 +1794,17 @@ CustomizeMode.prototype = {
       this._cancelDragActive(this._dragOverItem, dragOverItem);
     }
 
     if (dragOverItem != this._dragOverItem || dragValue != dragOverItem.getAttribute("dragover")) {
       if (dragOverItem != targetArea.customizationTarget) {
         this._setDragActive(dragOverItem, dragValue, draggedItemId, targetAreaType);
       }
       this._dragOverItem = dragOverItem;
+      targetArea.setAttribute("draggingover", "true");
     }
 
     aEvent.preventDefault();
     aEvent.stopPropagation();
   },
 
   _onDragDrop(aEvent, aOverrideTarget) {
     if (this._isUnwantedDragDrop(aEvent)) {
@@ -2114,16 +2118,20 @@ CustomizeMode.prototype = {
       }
     }
   },
   _cancelDragActive(aItem, aNextItem, aNoTransition) {
     let currentArea = this._getCustomizableParent(aItem);
     if (!currentArea) {
       return;
     }
+    let nextArea = aNextItem ? this._getCustomizableParent(aNextItem) : null;
+    if (currentArea != nextArea) {
+      currentArea.removeAttribute("draggingover");
+    }
     let areaType = CustomizableUI.getAreaType(currentArea.id);
     if (areaType) {
       if (aNoTransition) {
         aItem.setAttribute("notransition", "true");
       }
       aItem.removeAttribute("dragover");
       // Remove all property values in the case that the end padding
       // had been set.
@@ -2134,17 +2142,16 @@ CustomizeMode.prototype = {
       if (aNoTransition) {
         // Force a layout flush:
         aItem.getBoundingClientRect();
         aItem.removeAttribute("notransition");
       }
     } else {
       aItem.removeAttribute("dragover");
       if (aNextItem) {
-        let nextArea = this._getCustomizableParent(aNextItem);
         if (nextArea == currentArea) {
           // No need to do anything if we're still dragging in this area:
           return;
         }
       }
       // Otherwise, clear everything out:
       let positionManager = DragPositionManager.getManagerForArea(currentArea);
       positionManager.clearPlaceholders(currentArea, aNoTransition);
@@ -2222,17 +2229,17 @@ CustomizeMode.prototype = {
     return size;
   },
 
   _getCustomizableParent(aElement) {
     if (aElement) {
       // Deal with drag/drop on the padding of the panel.
       let containingPanelHolder = aElement.closest("#customization-panelHolder");
       if (containingPanelHolder) {
-        return containingPanelHolder.firstChild;
+        return containingPanelHolder.querySelector("#widget-overflow-fixed-list");
       }
     }
 
     let areas = CustomizableUI.areas;
     areas.push(kPaletteId);
     return aElement.closest(areas.map(a => "#" + CSS.escape(a)).join(","));
   },
 

--- a/browser/components/customizableui/content/customizeMode.inc.xul
+++ b/browser/components/customizableui/content/customizeMode.inc.xul
@@ -21,17 +21,19 @@
       <spacer id="customization-spacer"/>
     </box>
     <vbox id="customization-panel-container">
       <vbox id="customization-panelWrapper">
         <box class="panel-arrowbox">
           <image class="panel-arrow" side="top"/>
         </box>
         <box class="panel-arrowcontent" side="top" flex="1">
-          <hbox id="customization-panelHolder"/>
+          <vbox id="customization-panelHolder">
+            <description id="customization-panelDescription">&customizeMode.emptyOverflowList.description;</description>
+          </vbox>
           <box class="panel-inner-arrowcontentfooter" hidden="true"/>
         </box>
       </vbox>
     </vbox>
   </box>
   <hbox id="customization-footer">
 #ifdef CAN_DRAW_IN_TITLEBAR
     <checkbox id="customization-titlebar-visibility-checkbox" class="customizationmode-checkbox"

--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -334,18 +334,17 @@
        hidden="true">
   <photonpanelmultiview mainViewId="widget-overflow-mainView" disablekeynav="true">
     <panelview id="widget-overflow-mainView"
                context="toolbar-context-menu">
       <vbox class="panel-subview-body">
         <vbox id="widget-overflow-list" class="widget-overflow-list"
               overflowfortoolbar="nav-bar"/>
         <toolbarseparator id="widget-overflow-fixed-separator" hidden="true"/>
-        <vbox id="widget-overflow-fixed-list" class="widget-overflow-list" hidden="true"
-              emptylabel="&customizeMode.emptyOverflowList.description;"/>
+        <vbox id="widget-overflow-fixed-list" class="widget-overflow-list" hidden="true" />
       </vbox>
       <toolbarbutton command="cmd_CustomizeToolbars"
                       id="overflowMenu-customize-button"
                       class="subviewbutton panel-subview-footer"
                       accesskey="&overflowCustomizeToolbar.accesskey;"
                       label="&overflowCustomizeToolbar.label;"/>
     </panelview>
   </photonpanelmultiview>

--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -433,16 +433,17 @@ toolbarpaletteitem[place=toolbar] > tool
   border: 1px solid var(--arrowpanel-dimmed-even-further);
   box-shadow: 0 4px 10px hsla(0,0%,0%,.3);
   -moz-appearance: none;
   border-radius: var(--arrowpanel-border-radius);
 %else
   border: 1px solid var(--arrowpanel-border-color);
   box-shadow: 0 0 4px hsla(0,0%,0%,.2);
 %endif
+  max-width: 29em;
 }
 
 #customization-panelWrapper > .panel-arrowbox {
   position: relative;
   height: 10px;
   margin-bottom: -1px;
 }
 
@@ -490,40 +491,64 @@ toolbarpaletteitem[place=toolbar] > tool
 @media (min-resolution: 2dppx) {
   #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
     list-style-image: var(--panel-arrow-image-vertical,
                           url("chrome://global/skin/arrow/panelarrow-vertical@2x.png"));
   }
 }
 %endif
 
-#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) {
-  padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
+#customization-panelDescription {
+  font-size: 1.1em;
+  padding: 2px 12px 10px;
+  margin: 0;
+}
+
+#customization-panelHolder > #widget-overflow-fixed-list {
+  padding-top: 10px;
+  min-height: 225px;
 }
 
-#customization-panelHolder > #widget-overflow-fixed-list:empty {
+/**
+ * We create a ::before pseudoelement that contains a background image to show the
+ * drop dragon. This element fades in and out depending on whether the containing
+ * panel list is empty and unhovered, or not.
+ */
+#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) {
+  padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
+  border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+#customization-panelHolder > #widget-overflow-fixed-list::before {
+  display: block;
+  content: "";
   background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel.png");
-  background-position: center top 10px;
+  background-position: center bottom 10px;
   background-size: 218px 134px;
   background-repeat: no-repeat;
-}
-
-#customization-panelHolder > #widget-overflow-fixed-list:empty::after {
-  content: attr(emptylabel);
-  padding: 154px 10px 10px; /* 154 = 134 for the image, 10px space on either side. */
-  text-align: center;
-  display: block;
+  opacity: 0;
+  transition: opacity 300ms ease-out;
+  padding-bottom: 154px; /* 154 = 134 for the image, 10px space on either side. */
+  margin-bottom: -154px; /* don't affect positioning of the actual contents */
+  pointer-events: none;
 }
 
 @media (min-resolution: 1.1dppx) {
-  #customization-panelHolder > #widget-overflow-fixed-list:empty {
+  #customization-panelHolder > #widget-overflow-fixed-list::before {
     background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel@2x.png");
   }
 }
 
+#customization-panelHolder > #widget-overflow-fixed-list:empty::before {
+  opacity: 1;
+}
+#customization-panelHolder > #widget-overflow-fixed-list[draggingover]:empty::before {
+  opacity: 0;
+}
+
 #downloads-button-autohide-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 5px 12px;
 }
 
 #downloads-button-autohide-checkbox {
   margin: 0;
   padding: 0;
 }