--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1186,29 +1186,52 @@ toolbarpaletteitem[place="palette"] > #d
 }
 
 #customization-container[photon] > #customization-content-container > #customization-palette-container {
   flex-grow: 1;
 }
 
 #customization-panelHolder > #widget-overflow-fixed-list {
   padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
+  flex: 0 1 auto; /* Size to content, but allow ourselves to shrink */
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+#customization-container:not([photon]) #customization-panelHolder {
+  overflow-y: hidden;
 }
 
-#customization-panelHolder {
-  overflow-y: hidden;
+#customization-container[photon] #customization-panel-container {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+}
+
+#customization-container[photon] #customization-panelWrapper,
+#customization-container[photon] #customization-panelWrapper > .panel-arrowcontent,
+#customization-container[photon] #customization-panelHolder {
+  flex-direction: column;
+  display: flex;
+  min-height: 0;
+}
+
+#customization-container[photon] #customization-panelWrapper {
+  flex: 1 1 auto;
+  height: 0; /* Don't let my contents affect ancestors' content-based sizing */
+  align-items: end; /* align to the end on the cross-axis (affects arrow) */
 }
 
 #customization-panelWrapper,
 #customization-panelWrapper > .panel-arrowcontent {
   -moz-box-flex: 1;
 }
 
-#customization-panelWrapper > .panel-arrowcontent {
-  padding: 0 !important;
+#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowcontent {
   overflow: hidden;
 }
 
 #customization-panelHolder > #PanelUI-mainView {
   display: flex;
   flex-direction: column;
   /* Hack alert - by manually setting the preferred height to 0, we convince
      #PanelUI-mainView to shrink when the window gets smaller in customization

--- a/browser/components/customizableui/content/customizeMode.inc.xul
+++ b/browser/components/customizableui/content/customizeMode.inc.xul
@@ -67,21 +67,17 @@
               oncommand="gCustomizeMode.exit();"
               label="&customizeMode.done;"
               class="customizationmode-button"/>
     </hbox>
   </box>
   <box id="customization-content-container"/>
   <vbox id="customization-panel-container">
     <vbox id="customization-panelWrapper">
-      <html:style html:type="text/html" scoped="scoped">
-        @import url(chrome://global/skin/popup.css);
-      </html:style>
       <box class="panel-arrowbox">
-        <box flex="1"/>
         <image class="panel-arrow" side="top"/>
       </box>
       <box class="panel-arrowcontent" side="top" flex="1">
         <hbox id="customization-panelHolder"/>
         <box class="panel-inner-arrowcontentfooter" hidden="true"/>
       </box>
     </vbox>
   </vbox>

--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -475,9 +475,81 @@ toolbarpaletteitem[place="toolbar"]:not(
 .customization-lwtheme-menu-footeritem:hover {
   background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box;
 }
 
 .customization-lwtheme-menu-footeritem:first-child {
   border-inline-end: 1px solid var(--panel-separator-color);
 }
 
+#customization-panelWrapper > .panel-arrowcontent {
+  color: var(--arrowpanel-color);
+  background: var(--arrowpanel-background);
+  background-clip: padding-box;
+  border: 1px solid var(--arrowpanel-border-color);
+%ifdef XP_MACOSX
+  box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
+  -moz-appearance: none;
+  border-radius: var(--arrowpanel-border-radius);
+%else
+  box-shadow: 0 0 4px hsla(0,0%,0%,.2);
+%endif
+}
+
+#customization-panelWrapper > .panel-arrowbox {
+  position: relative;
+  height: 10px;
+%ifndef XP_MACOSX
+  margin-bottom: 2px;
+%endif
+}
+
+#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+%ifdef XP_MACOSX
+  list-style-image: var(--panel-arrow-image-vertical,
+                        url("chrome://global/skin/arrow/panelarrow-vertical.png"));
+  /* The OS X image is 2px narrower than the windows/linux one.
+   * Add padding to compensate: */
+  padding: 0 1px;
+  /* specify width for hidpi image to fit correctly */
+  width: 20px;
+%else
+  list-style-image: var(--panel-arrow-image-vertical,
+                        url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg"));
+%endif
+  /* The arrow needs to point to the overflow button. The numbers involved
+   * are:
+   * overflow button width: (16px + 2 * 2px padding
+   * + 2 * toolbarbutton-inner-padding)
+   * hamburger button width: (16px + 2 * 5px padding
+   * + 2 * toolbarbutton-inner-padding)
+   * hamburger button border + margin: 1px + 2px
+   * The total desired offset from the right edge of the window is thus:
+   * 10px + toolbarbutton-inner-padding (center of overflow button) +
+   * 29px + 2 * toolbarbutton-inner-padding
+   * The #customization-panel-container has a 25px margin, so that leaves:
+   * 14px + 3 * toolbarbutton-inner-padding
+   * Finally, we need to center the arrow, which is 20px wide, so subtract
+   * 10px.
+   */
+  margin-inline-end: calc(4px + 3 * var(--toolbarbutton-inner-padding));
+}
+
+%ifdef XP_MACOSX
+@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
+
+/* Non-photon adjustments. Remove when we stop supporting non-photon. */
+#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowbox {
+  margin-bottom: -1px;
+}
+
+#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+  margin-inline-end: 0;
+  margin-inline-start: 22.35em;
+}
+
 %include customizeTip.inc.css