@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator

Fix overflowing of AphrontSideNavFilterView on small screens and tidy up nav bar styles

Summary:
Switch the two column layout of AphrontSideNavFilterView (used in pretty much most views) from table to flex display. The former CSS rendering could lead to overflowing of the entire page on small screens if very wide unbreaking content is displayed (example described here: T15809).

While I was at it I have found some unused code. The CSS file `phabricator-nav-view.css` consisted almost only of `.phabricator-side-menu-home` class selectors. This is an ancient class (there at least since 2013) not used anymore:

https://we.phorge.it/source/phorge/browse/master/src/applications/directory/controller/PhabricatorDirectoryController.php;919bd4a03499305093d8882952a9dd3dac1c55a9$169

So I have removed this CSS component and saved the few still used declarations to the main `phui-basic-nav-view.css`.

There was some unused code in `AphrontSideNavFilterView.php` too.

Fixes T15809

Test Plan:
Look at this video to understand the problem:

F2178277

Go in a Task comment and mention a task with a very-long title. Have phd enabled to generate feeds. Visit homepage with feeds:

See that you cannot reproduce anymore.

Browse pages with the right nav bar with many devices and look if the layout looks fine and not broken.

Tested the homepage, scaling from mobile to desktop, using:

- Firefox 124 64bit on GNU/Linux (snap)
- Chromium 124 64bit on GNU/Linux (snap)
- ...

Tested other elements, scaling from mobile to desktop, still working correctly:

- popup dialogs
- right floating menu
- top curtain
- notifications
- Conpherence chats
- unresolved setup issues
- search omnibox

Reviewers: O1 Blessed Committers, aklapper

Reviewed By: O1 Blessed Committers, aklapper

Subscribers: aklapper, speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15809

Differential Revision: https://we.phorge.it/D25619

+17 -75
+5 -8
resources/celerity/map.php
··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => '3144a5e2', 11 11 'conpherence.pkg.js' => '020aebcf', 12 - 'core.pkg.css' => '07b1d4b2', 12 + 'core.pkg.css' => '10815c8e', 13 13 'core.pkg.js' => 'f58c3c6e', 14 14 'dark-console.pkg.js' => '187792c2', 15 15 'differential.pkg.css' => '91ac6214', ··· 31 31 'rsrc/css/aphront/multi-column.css' => 'fbc00ba3', 32 32 'rsrc/css/aphront/notification.css' => '30240bd2', 33 33 'rsrc/css/aphront/panel-view.css' => '46923d46', 34 - 'rsrc/css/aphront/phabricator-nav-view.css' => '423f92cc', 35 34 'rsrc/css/aphront/table-view.css' => '0bb61df1', 36 35 'rsrc/css/aphront/tokenizer.css' => '194e8160', 37 36 'rsrc/css/aphront/tooltip.css' => 'e3f2412f', ··· 42 41 'rsrc/css/application/base/main-menu-view.css' => '741a6bba', 43 42 'rsrc/css/application/base/notification-menu.css' => '4df1ee30', 44 43 'rsrc/css/application/base/phui-theme.css' => '35883b37', 45 - 'rsrc/css/application/base/standard-page-view.css' => 'ab9ca8d8', 44 + 'rsrc/css/application/base/standard-page-view.css' => '6267874d', 46 45 'rsrc/css/application/conduit/conduit-api.css' => 'ce2cfc41', 47 46 'rsrc/css/application/config/config-options.css' => '16c920ae', 48 47 'rsrc/css/application/config/config-template.css' => '20babf50', ··· 138 137 'rsrc/css/phui/phui-action-list.css' => 'd26ccb62', 139 138 'rsrc/css/phui/phui-action-panel.css' => '6c386cbf', 140 139 'rsrc/css/phui/phui-badge.css' => 'aa49028c', 141 - 'rsrc/css/phui/phui-basic-nav-view.css' => 'a5693cf0', 140 + 'rsrc/css/phui/phui-basic-nav-view.css' => '6b7bd9a5', 142 141 'rsrc/css/phui/phui-big-info-view.css' => '362ad37b', 143 142 'rsrc/css/phui/phui-box.css' => '5ed3b8cb', 144 143 'rsrc/css/phui/phui-bulk-editor.css' => '374d5e30', ··· 792 791 'phabricator-keyboard-shortcut' => '1a844c06', 793 792 'phabricator-keyboard-shortcut-manager' => '81debc48', 794 793 'phabricator-main-menu-view' => '741a6bba', 795 - 'phabricator-nav-view-css' => '423f92cc', 796 794 'phabricator-notification' => 'a9b91e3f', 797 795 'phabricator-notification-css' => '30240bd2', 798 796 'phabricator-notification-menu-css' => '4df1ee30', ··· 805 803 'phabricator-shaped-request' => '995f5102', 806 804 'phabricator-slowvote-css' => '1694baed', 807 805 'phabricator-source-code-view-css' => 'e382316a', 808 - 'phabricator-standard-page-view' => 'ab9ca8d8', 806 + 'phabricator-standard-page-view' => '6267874d', 809 807 'phabricator-textareautils' => 'f340a484', 810 808 'phabricator-title' => '43bc9360', 811 809 'phabricator-tooltip' => '83754533', ··· 823 821 'phriction-document-css' => '03380da0', 824 822 'phui-action-panel-css' => '6c386cbf', 825 823 'phui-badge-view-css' => 'aa49028c', 826 - 'phui-basic-nav-view-css' => 'a5693cf0', 824 + 'phui-basic-nav-view-css' => '6b7bd9a5', 827 825 'phui-big-info-view-css' => '362ad37b', 828 826 'phui-box-css' => '5ed3b8cb', 829 827 'phui-bulk-editor-css' => '374d5e30', ··· 2258 2256 'phui-lightbox-css', 2259 2257 'phui-comment-panel-css', 2260 2258 'phui-header-view-css', 2261 - 'phabricator-nav-view-css', 2262 2259 'phui-basic-nav-view-css', 2263 2260 'phui-crumbs-view-css', 2264 2261 'phui-oi-list-view-css',
-1
resources/celerity/packages.php
··· 124 124 'phui-lightbox-css', 125 125 'phui-comment-panel-css', 126 126 'phui-header-view-css', 127 - 'phabricator-nav-view-css', 128 127 'phui-basic-nav-view-css', 129 128 'phui-crumbs-view-css', 130 129 'phui-oi-list-view-css',
-8
src/view/layout/AphrontSideNavFilterView.php
··· 17 17 */ 18 18 final class AphrontSideNavFilterView extends AphrontView { 19 19 20 - private $items = array(); 21 20 private $baseURI; 22 21 private $selectedFilter = false; 23 22 private $menu; ··· 199 198 } 200 199 201 200 private function renderFlexNav() { 202 - require_celerity_resource('phabricator-nav-view-css'); 203 - 204 201 $nav_classes = array(); 205 202 $nav_classes[] = 'phabricator-nav'; 206 203 207 - $nav_id = null; 208 - $drag_id = null; 209 204 $content_id = celerity_generate_unique_node_id(); 210 205 $local_id = null; 211 - $background_id = null; 212 206 $local_menu = null; 213 207 $main_id = $this->getMainID(); 214 208 215 - $nav_menu = null; 216 209 if ($this->menu->getItems()) { 217 210 $local_id = celerity_generate_unique_node_id(); 218 - $background_id = celerity_generate_unique_node_id(); 219 211 220 212 $nav_classes[] = 'has-local-nav'; 221 213
-48
webroot/rsrc/css/aphront/phabricator-nav-view.css
··· 1 - /** 2 - * @provides phabricator-nav-view-css 3 - */ 4 - 5 - .device .phui-navigation-shell div.phabricator-nav-local { 6 - display: none; 7 - } 8 - 9 - .device-desktop .has-local-nav .phabricator-nav-local { 10 - display: block; 11 - } 12 - 13 - .device-phone .phabricator-side-menu-home .phabricator-nav-local { 14 - display: block; 15 - } 16 - 17 - /* Home Sidenav */ 18 - .phui-basic-nav.phui-navigation-shell 19 - .phabricator-side-menu-home .phabricator-nav-local { 20 - padding-top: 16px; 21 - padding-right: 0; 22 - background-color: transparent; 23 - width: 205px; 24 - max-width: 205px; 25 - } 26 - 27 - .device-phone .phui-basic-nav.phui-navigation-shell 28 - .phabricator-side-menu-home .phabricator-nav-local { 29 - padding-top: 0; 30 - padding-right: 0; 31 - background-color: transparent; 32 - width: auto; 33 - } 34 - 35 - 36 - .phabricator-nav-content { 37 - overflow: hidden; 38 - } 39 - 40 - .device-phone .phabricator-side-menu-home .phabricator-nav-content { 41 - display: none; 42 - } 43 - 44 - .device-phone .phabricator-side-menu-home .phabricator-nav-local { 45 - width: 100%; 46 - padding-top: 0; 47 - margin-top: 0; 48 - }
-4
webroot/rsrc/css/application/base/standard-page-view.css
··· 45 45 margin-left: 221px; 46 46 } 47 47 48 - .device .phabricator-side-menu-home + .phabricator-standard-page-footer { 49 - display: none; 50 - } 51 - 52 48 .keyboard-shortcut-help { 53 49 margin: 4px 12px; 54 50 }
+12 -6
webroot/rsrc/css/phui/phui-basic-nav-view.css
··· 4 4 5 5 .device-desktop .phui-navigation-shell, 6 6 .phabricator-home.device .phui-navigation-shell { 7 - display: table; 8 7 width: 100%; 9 8 height: calc(100vh - {$menu.main.height}); 10 9 } 11 10 12 11 .device-desktop .phui-navigation-shell .phabricator-nav, 13 12 .phabricator-home.device .phui-navigation-shell .phabricator-nav { 14 - display: table-row; 13 + display: flex; 14 + min-height: 100%; 15 15 } 16 16 17 17 .device-desktop .phui-navigation-shell .phabricator-nav-local, 18 18 .phabricator-home.device .phui-navigation-shell .phabricator-nav-local { 19 - display: table-cell; 20 19 position: relative; 21 - vertical-align: top; 22 20 margin-top: 0; 23 21 overflow: hidden; 24 22 } ··· 35 33 } 36 34 37 35 .phui-basic-nav.phui-navigation-shell .phabricator-nav-local { 38 - width: 205px; 39 - max-width: 205px; 36 + flex: 0 0 205px; 40 37 padding-top: 12px; 41 38 padding-right: 8px; 39 + } 40 + 41 + .device .phui-navigation-shell .phabricator-nav-local { 42 + display: none; 43 + } 44 + 45 + .phabricator-nav-content { 46 + flex-grow: 1; 47 + overflow: hidden; 42 48 } 43 49 44 50 .phui-two-column-view .phui-basic-nav.phui-navigation-shell