css: replace panel-specific hacks with an all-encompassing workaround

src/userChrome/editBookmarkPanel.css

-/* Copyright 2024 Oliver Smith, Peter Mack
- * SPDX-License-Identifier: MPL-2.0 */
-
-@media (max-width: 700px) {
-    /* The only way I (ollieparanoid) found to make this not glitchy, was to
-     * reduce the bookmark panel to the minimum amount of useful controls and
-     * hardcode width and height. Patches to improve this welcome, but make
-     * sure that you don't introduce new UI glitches by doing extensive
-     * testing. */
-
-    #editBookmarkPanel {
-        margin-top: -390px !important;
-        height: 200px;
-        max-height: 200px;
-        max-width: calc(100vw - 100px);
-    }
-
-    #editBookmarkPanel box.panel-header,
-    #editBookmarkHeaderSeparator {
-        display: none !important;
-    }
-
-    #editBookmarkPanelContent {
-        max-width: 250px !important;
-        width: 250px !important;
-        padding-right: 20px;
-    }
-
-    /* Hide the screenshot and the line below it. The page is right there when
-     * you bring up the menu, no need for a screenshot. Also it has a glitch
-     * when taking the screenshot in mobile portrait view, half the screenshot
-     * is just black. Let's rather use the space to edit the bookmark
-     * information.
-     * Note: There's no more screenshot in FF 124, so likely part of
-     * this can be dropped with ESR 128 */
-
-
-    #editBookmarkPanelInfoArea,
-    #editBookmarkSeparator {
-        display: none;
-    }
-
-    #editBMPanel_folderRow,
-    .editBMPanel_folderRow,
-    #editBMPanel_tagsRow,
-    .editBMPanel_tagsRow {
-        display: none;
-    }
-
-    /* Fix remove/save buttons for Firefox 124 */
-    #editBookmarkPanel * .panel-footer {
-        justify-content: flex-start !important;
-    }
-
-    /* Fix buttons for FF 115, likely obsolete with FF ESR 128 */
-    #editBookmarkPanelBottomButtons {
-        width: 250px !important;
-        min-width: 250px !important;
-        padding: 0px !important;
-        justify-content: flex-start !important;
-        margin: 0px 0px 20px 0px !important;
-    }
-}

src/userChrome/popups.css

@@ -11,29 +11,33 @@
             margin-top: -280px !important;
             max-width: 98vw;
         }
-        /* Additional fix for "Add $extension" menu */
-        #notification-popup {
-            margin-top: -330px !important;
-            padding-left: 30px;
-        }
-        /* Menu that appears when long-pressing the back-button */
-        #backForwardMenu {
-            margin-top: -250px;
-            height: 200px;
-            min-height: 200px;
-            max-width: 100vw !important;
-        }
     }
 
-    #downloadsPanel-mainView {
-        max-width: calc(100vw - 10px);
+    /* Fix panels that are misplaced when the URL bar is at the bottom */
+    panel[side="top"], box.panel-viewstack, #appMenu-popup {
+        height: max-content !important;
+        min-height: max-content !important;
+        max-height: 80vh !important;
+        min-width: 100% !important;
+        width: max-content !important;
+        max-width: 100vw !important;
+        margin-bottom: 4px !important;
+        border-bottom-left-radius: 0 !important;
+        border-radius: 0 !important;
+        padding: 0 !important;
     }
 
-    /* Fix unified-extensions and protections menu */
-    .panel-viewstack {
-        height: 100vh !important;
-        max-height: calc(100vh - 100px) !important;
-        max-width: calc(100vw - 10px);
+    /* Wonky rule to ensure the GNOME CSS doesn't override this :( */
+    panelmultiview, panelmultiview > *, panelmultiview * panelview,
+    body #identity-popup-mainView, body #permission-popup-mainView,
+    body #protections-popup-mainView, body #identity-popup-mainView-panel-header {
+        flex: 1 !important;
+        flex-shrink: 0 !important;
+        max-width: -moz-available !important;
+        min-width: -moz-available !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        position: relative !important;
     }
 
     /* Allow extensions to use full popup */
@@ -57,33 +61,6 @@
         display: none !important
     }
 
-    /* fix flickering of the protections, permissions,
-     * widget overflow and identity popups, make seventh
-     * column of date picker visible */
-    #protections-popup,
-    #permission-popup,
-    #widget-overflow,
-    #identity-popup,
-    #date-picker {
-        max-width: 100vw !important;
-    }
-
-    /* fix the protections popup gettting
-     * too wide, making controls unaccessible */
-    #protections-popup-mainView {
-        min-width: 100vw !important;
-        max-width: 100vw !important;
-    }
-
-    /* fix flicker on extension menus.
-     * The compromise is that the overflow menu always use
-     * all available height.
-     * The -80px is here to prevent covering the main bars */
-    #widget-overflow,
-    #widget-overflow-mainView {
-        height: calc(100vh - 80px) !important;
-    }
-
     /* Adjust dialogues like "Confirm before closing multiple
      * tabs" or "Allow open in app" */
     .dialogFrame {