Fixed mobile navigation

Author: Venefilyn

pkg/lib/patternfly/patternfly-5-overrides.scss

@@ -2,6 +2,8 @@
 // Pull in variables (for breakpoints)
 @use "global-variables" as *;
 
+$phone: 767px;
+
 // PF Select is deprecated - no issue reported upstream - this needs to be removed from our codebase
 // Make select have the expected width
 // REVIEW @Venefilyn: Check if still relevant
@@ -354,11 +356,21 @@ to wrap around when there isn't enough space.
 // intended mainly for PF PageSection elements (pf-v6-c-page__main-section).
 // It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
 // except this only affects the sides, not the top and bottom.
-// @media screen and (max-width: $pf-v6-global--breakpoint--sm) {
-//   .pf-v6-c-page__main>section.pf-v6-c-page__main-section:not(.pf-m-padding) {
-//     padding-inline: 0;
-//   }
-// }
+@media screen and (max-width: $pf-v6-global--breakpoint--sm) {
+  .pf-v6-c-page__main>section.pf-v6-c-page__main-section:not(.pf-m-padding) {
+    padding-inline: 0;
+  }
+}
+
+// Drop page padding and radius for page container in mobile mode. Make sure
+// the page container is also covering as much as possible
+@media screen and (max-width: $phone) {
+  .pf-v6-c-page {
+    --pf-v6-c-page--inset: 0;
+    --pf-v6-c-page__main-container--BorderRadius: 0;
+    --pf-v6-c-page__main-container--MaxHeight: 100%;
+  }
+}
 
 // Patch tabular number 0s to not have the slash inside
 // https://github.com/RedHatOfficial/RedHatFont/issues/53

pkg/shell/hosts.tsx

@@ -40,6 +40,7 @@ import { split_connection_string } from "./machines/machines";
 import { add_host, edit_host, connect_host } from "./hosts_dialog.jsx";
 
 import { ShellState } from "./state";
+import { Icon } from "@patternfly/react-core";
 
 const _ = cockpit.gettext;
 
@@ -244,23 +245,28 @@ export class CockpitHosts extends React.Component {
             <div className="ct-switcher">
                 <div className="pf-v6-c-select pf-m-dark">
                     <button onClick={this.toggleMenu} id="host-toggle" aria-labelledby="host-toggle" aria-expanded={(this.state.opened ? "true" : "false")} aria-haspopup="listbox" type="button" className="ct-nav-toggle pf-v6-c-select__toggle pf-v6-c-menu-toggle pf-m-plain">
-                        <span className="pf-v6-c-select__toggle-wrapper desktop_v">
-                            <span className="pf-v6-c-select__toggle-text">
-                                <HostLine user={user} host={label} />
+                        <span className="pf-v6-c-button__text">
+                            <span className="pf-v6-c-select__toggle-wrapper desktop_v">
+                                <span className="pf-v6-c-select__toggle-text">
+                                    <HostLine user={user} host={label} />
+                                </span>
                             </span>
+                            <Icon size="xl">
+                                <CaretUpIcon
+                                    className={`pf-v6-c-select__toggle-arrow mobile_v ${this.state.opened ? 'clicked' : ''}`}
+                                    aria-hidden="true"
+                                />
+                            </Icon>
+                            <span className="pf-v6-c-select__toggle-wrapper mobile_v">
+                                {_("Host")}
+                            </span>
+                            <Icon size="xl">
+                                <CaretDownIcon
+                                    className={`pf-v6-c-select__toggle-arrow desktop_v ${this.state.opened ? 'clicked' : ''}`}
+                                    aria-hidden="true"
+                                />
+                            </Icon>
                         </span>
-                        <CaretUpIcon
-                            className={`pf-v6-c-select__toggle-arrow mobile_v pf-v6-c-icon pf-m-lg ${this.state.opened ? 'clicked' : ''}`}
-                            aria-hidden="true"
-                        />
-                        <span className="pf-v6-c-select__toggle-wrapper mobile_v">
-                            {_("Host")}
-                        </span>
-                        <CaretDownIcon
-                            className={`pf-v6-c-select__toggle-arrow desktop_v pf-v6-c-icon ${this.state.opened ? 'clicked' : ''}`}
-                            aria-hidden="true"
-                        />
-
                     </button>
                 </div>
 

pkg/shell/nav.scss

@@ -641,8 +641,8 @@ $desktop: $phone + 1px;
 .ct-nav-toggle:not(.pf-v6-c-menu) {
   &:hover, &:active, &.active, &.interact, &[aria-expanded="true"] {
     text-decoration: none;
-    // approximate --pf-v5-global--BackgroundColor--dark-400, but with opacity
-    background: var(--pf-t--global--background--color--secondary--hover) !important;
+    // add in opacity so the navigation colored line doesn't hide on hover
+    background: color-mix(in srgb, var(--pf-t--global--background--color--secondary--hover) 32%, transparent) !important;
 
     .hostname {
       text-decoration: underline;
@@ -734,9 +734,12 @@ $desktop: $phone + 1px;
 
 // Mobile sizes
 @media (max-width: $phone) {
-  #host-toggle ,
-  #nav-system-item ,
+  #host-toggle,
+  #nav-system-item,
+  button.ct-nav-toggle,
   button.ct-nav-toggle > .pf-v6-c-button__text {
+    // Remove gap between text and icon
+    --pf-v6-c-menu-toggle--Gap: 0;
     // Stretch to navbar
     block-size: 100%;
     // Don't stretch to fill content; make optimal width same as height
@@ -747,8 +750,7 @@ $desktop: $phone + 1px;
     grid-template-rows: 28px 1fr;
     justify-content: center;
     justify-items: center;
-    color: var(--pf-v5-global--Color--light-100);
-    padding-block: var(--pf-t--global--spacer--sm);
+    // padding-block: var(--pf-t--global--spacer--sm);
     padding-inline: var(--pf-t--global--spacer--xs);
     align-items: center;
 
@@ -779,6 +781,17 @@ $desktop: $phone + 1px;
       max-inline-size: 100%;
     }
   }
+
+  // FIXME @Venefilyn: Some bug is causing the listener in SidebarToggle to trigger pointer clicks on internal elements causing the menu to not work.
+  // Setting it to initial means that the after content that covers up the whole button will still allow us to trigger it correctly.
+  #nav-system-item::after {
+    pointer-events: initial
+  }
+
+  // PF6 introduced toolbar column gap which is great in general. But not what we want for mobile view
+  .ct-topnav-content {
+    --pf-v6-c-toolbar__content-section--ColumnGap: 0;
+  }
 }
 
 // HACK: Don't span the navigation as wide or tall as possible

pkg/shell/nav.tsx

@@ -31,6 +31,7 @@ import { Status } from "notifications";
 import { Location, encode_location, ManifestItem } from "./util.jsx";
 import { ShellState } from "./state";
 import { ManifestKeyword } from "./manifests";
+import { Icon } from "@patternfly/react-core";
 
 const _ = cockpit.gettext;
 
@@ -65,7 +66,9 @@ export const SidebarToggle = () => {
         <Button className={"pf-v6-c-select__toggle ct-nav-toggle " + (active ? "active" : "")}
                 id="nav-system-item" variant="plain"
                 onClick={() => setActive(!active)}>
-            <ContainerNodeIcon className="pf-v6-c-icon pf-m-lg" />
+            <Icon size="xl">
+                <ContainerNodeIcon />
+            </Icon>
             {_("System")}
         </Button>
     );

pkg/shell/topnav.tsx

@@ -37,6 +37,7 @@ import { AboutCockpitModal, LangModal, OopsModal } from "./shell-modals.jsx";
 import { SuperuserIndicator } from "./superuser.jsx";
 import { read_os_release } from "os-release.js";
 import { DialogsContext } from "dialogs.jsx";
+import { Icon } from "@patternfly/react-core";
 
 const _ = cockpit.gettext;
 
@@ -264,8 +265,9 @@ export class TopNav extends React.Component {
                                         <MenuToggle
                                           ref={toggleRef}
                                           id="toggle-docs"
+                                          variant="plain"
                                           className="ct-nav-toggle"
-                                          icon={<HelpIcon className="toggle-docs-icon pf-v6-c-icon pf-m-lg" />}
+                                          icon={<Icon size="lg"><HelpIcon className="toggle-docs-icon" /></Icon>}
                                           isExpanded={this.state.docsOpened}
                                           isFullHeight
                                           onClick={() => {
@@ -298,8 +300,9 @@ export class TopNav extends React.Component {
                                         <MenuToggle
                                           ref={toggleRef}
                                           id="toggle-menu"
+                                          variant="plain"
                                           className="ct-nav-toggle"
-                                          icon={<CogIcon className="pf-v6-c-icon pf-m-lg" />}
+                                          icon={<Icon size="lg"><CogIcon /></Icon>}
                                           isExpanded={this.state.menuOpened}
                                           isFullHeight
                                           onClick={(event) => {