diff --git a/src/userChrome/editBookmarkPanel.css b/src/userChrome/editBookmarkPanel.css new file mode 100644 index 0000000..72778ac --- /dev/null +++ b/src/userChrome/editBookmarkPanel.css @@ -0,0 +1,43 @@ +/* Copyright 2021 Oliver Smith + * SPDX-License-Identifier: GPL-3.0-or-later */ + +@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. */ + #editBookmarkPanelInfoArea, + #editBookmarkSeparator { + display: none; + } + + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none; + } +} diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css index 1389ec5..4c41e69 100644 --- a/src/userChrome/popups.css +++ b/src/userChrome/popups.css @@ -2,6 +2,17 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ @media (max-width: 700px) { + /* Hack to prevent popups from flickering around. It looks like e.g. the + * editBookmarkPanel has two heights otherwise, and draws one frame with a + * short height and one frame with the proper one. */ + #mainPopupSet { + position: fixed !important; + top: 0px; + left: 0px; + right: 0px; + bottom: 100px; + } + /* Popup notifications (install add-on etc.): set max-width, remove icon and * make font smaller so it fits the box */ .popup-notification-body-container {