@visns-studio/visns-components 6.32.3 → 6.34.3

package/src/components/styles/Form.module.scss

@@ -336,6 +336,16 @@ input[type='file'] {
     justify-content: space-between;
     gap: var(--spacing-md);
     padding: var(--spacing-md) var(--spacing-lg);
+    /* STUCK TO THE TOP OF THE PANEL. The dialog is one scroll region now (see
+       `.modal__content` below and StandardModal.module.scss), and in a single
+       scroller a header that is not sticky is a header that scrolls away —
+       taking the close button with it, which on a phone is the only obvious
+       way out of the dialog. Opaque, or the form scrolls through it. */
+    position: sticky;
+    top: 0;
+    /* Above the form's own sticky button bar, which is 2. */
+    z-index: 3;
+    background: var(--tertiary-color);
 
     h1 {
         /* Was --secondary-color, the same red that means destructive
@@ -418,12 +428,25 @@ input[type='file'] {
     }
 }
 
+/* ONE SCROLL REGION PER DIALOG, and it is the panel — not this.
+ *
+ * This used to be `max-height: 85vh; overflow-y: auto` INSIDE a panel that was
+ * also `max-height: 85vh; overflow-y: auto`, so a dialog had two nested
+ * scrollers of the same height. The form's Save bar is `position: sticky;
+ * bottom: 0`, which sticks it to the bottom of the INNER box — and the inner
+ * box starts below the header, so its bottom edge sits below the bottom of the
+ * outer one. The bar was therefore off-screen until the outer region had been
+ * scrolled as well: reach the end of the form, and Save is still not there.
+ * On a phone, where the sheet was `100vh` against a shorter visual viewport,
+ * it could not be reached at all.
+ *
+ * With the cap and the overflow gone this is ordinary content in the panel's
+ * scroller, the header above it is sticky and the button bar below it is
+ * sticky, and both stay on screen at every height. */
 .modal__content {
     width: 100%;
     position: relative;
     padding: 1rem;
-    max-height: 85vh;
-    overflow-y: auto;
     min-height: 400px;
 
     .btn {
@@ -675,3 +698,78 @@ input[type='file'] {
             color-mix(in srgb, var(--highlight-color, #3cbf7d) 30%, transparent);
     }
 }
+
+/* ============================================================================
+ * The dialog on a phone
+ * ----------------------------------------------------------------------------
+ * The panel's own shape is StandardModal.module.scss's job — full width, a
+ * bottom sheet, `100dvh`. What is left is what the panel CONTAINS, and all of
+ * it is inside a `max-width: 640px` query, so not one declaration applies to
+ * the desktop dialog.
+ *
+ * The field grid needs nothing: `.formcontainer` is a `container-type:
+ * inline-size` container and `size: "half"` / `"quarter"` already collapse to
+ * one track at 640px of CONTAINER width, which a full-width phone panel always
+ * is. See the block at the top of this file.
+ * ==========================================================================*/
+@media (max-width: 640px) {
+    /* 400px of empty white under a two-line confirm dialog, on a screen with
+       maybe 700 to spend. The panel is bounded and scrolls; the content does
+       not need a floor. */
+    .modal__content {
+        min-height: 0;
+        padding: 0.875rem;
+    }
+
+    .modal__header {
+        padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+
+        h1 {
+            /* One step down: a 1.125rem title beside a 44px close button wraps
+               to two lines on a 390px screen. */
+            font-size: var(--font-size-md, 1rem);
+        }
+    }
+
+    /* A 32px target is a miss. 2.75rem is the 44px Apple and Google both
+       publish, and it is the only way out of a dialog that fills the screen. */
+    .modal__close {
+        width: 2.75rem;
+        height: 2.75rem;
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+    }
+
+    /* The bar keeps its full-bleed margins against the smaller padding above,
+       or it sits inset from the panel edges by the difference. */
+    .buttonContainer {
+        margin: 1rem -0.875rem -0.875rem;
+        padding: 0.75rem 0.875rem;
+        /* Both buttons reachable with one thumb; Save stays on the right. */
+        gap: 0.5rem;
+    }
+}
+
+/* ============================================================================
+ * iOS zooms the page when a control smaller than 16px takes focus
+ * ----------------------------------------------------------------------------
+ * Not a preference and not configurable: Safari on iPhone zooms to the focused
+ * field whenever its computed font-size is below 16px, and it does not zoom
+ * back out. The form's controls are `--font-size-sm` (13px), so every tap into
+ * a field in a dialog scaled the page up and left the user pinching back.
+ *
+ * Scoped to a coarse pointer as well as to the width, so a 640px-wide desktop
+ * window keeps the type scale it has always had — this is a fix for a touch
+ * keyboard, not for a narrow window. Scoped to the dialog because that is
+ * where the complaint is; a page form on a phone is a separate question with a
+ * separate blast radius.
+ * ==========================================================================*/
+@media (max-width: 640px) and (pointer: coarse) {
+    .modalwrap {
+        input:not([type='checkbox']):not([type='radio']),
+        select,
+        textarea {
+            font-size: 16px;
+        }
+    }
+}

package/src/components/styles/Navigation.module.scss

@@ -320,10 +320,22 @@
                 color: #fff;
             }
 
+            /* THE HEADER BAR'S ICONS ONLY, and the two hiding declarations
+               have moved out of here for it — see `.hwrap .app-nav … svg` at
+               the foot of this file.
+
+               `.app-nav` is not a header class. The same list class is used by
+               the top bar and by the sidebar rail, so a bare `svg { display:
+               none }` in here reached the rail as well and hid every icon
+               `renderNav` draws for the `cms` / `simple` layouts. It was not
+               even a fight the rail could win on specificity: the rail's own
+               svg rule is five classes deep and outranks this one easily, but
+               it only ever set `position`, `right`, `opacity` and `color` — it
+               never mentioned `display`, so there was nothing for the higher
+               specificity to override and `display: none` simply applied. That
+               is the whole bug: a blank rail, expanded and collapsed alike. */
             svg {
                 color: var(--secondary-color);
-                display: none;
-                visibility: hidden;
             }
 
             /* The current page: a filled pill AND the rule below. The pill
@@ -782,8 +794,14 @@
        centre. The anchor is the chip itself, and the pill stays INSIDE its
        box: the chip row is a scroll container (see the overflow comment
        below), and a scroll container clips both axes — a pill overhanging
-       the edge by 2px rendered as a numberless green sliver. */
-    > ul > li > a {
+       the edge by 2px rendered as a numberless green sliver.
+
+       `:not([data-nav-overlay] *)` for the same reason every other rule in
+       this block carries it (see the long note below): a popover mounted in
+       the cluster advertises itself with `data-nav-overlay`, and a link in
+       ITS list is not a chip — this rule was pinning any `.nav-badge` inside
+       one to the corner of its row. */
+    > ul > li > a:not([data-nav-overlay] *) {
         position: relative;
 
         .nav-badge {
@@ -1272,6 +1290,9 @@
                         display: flex;
                         flex-wrap: nowrap;
                         align-items: center;
+                        /* Icon, then label. Only pays for itself when there is
+                           an icon: a row with one child has no gap to draw. */
+                        gap: 0.6rem;
                         color: var(--tertiary-color);
                         box-sizing: border-box;
                         padding: 0.5rem 1rem;
@@ -1285,11 +1306,30 @@
 
                     svg {
                         position: relative;
-                        right: 8px;
+                        /* Was `right: 8px` — a nudge that made sense while
+                           these rows were text only and the occasional icon
+                           was hidden anyway. With the icon drawn it pulls the
+                           glyph into the row's left padding and out of line
+                           with the rows above and below it. The space between
+                           the icon and the label is the `gap` on the row now,
+                           which is what it should have been. */
+                        right: 0;
                         opacity: 1;
                         transition: opacity 0.65s
                             cubic-bezier(0.25, 0.8, 0.25, 1);
                         color: var(--secondary-color);
+                        /* STATED, not assumed. Something else in this file
+                           used to hide these (see the `.hwrap` note), and the
+                           reason it could is that this rule never said what
+                           `display` a rail icon has. It says so now, so the
+                           rail cannot be blanked by a rule it outranks. */
+                        display: block;
+                        visibility: visible;
+                        /* An 18px glyph in a flex row shrinks with the row
+                           unless it refuses to; a label long enough to squeeze
+                           it is a label that would otherwise take the icon's
+                           width and leave nothing. */
+                        flex: 0 0 auto;
                     }
 
                     &:hover a,
@@ -2469,3 +2509,280 @@ $drawer-top: var(
         padding-right: var(--spacing-sm, 0.5rem);
     }
 }
+
+/* ============================================================================
+ * The collapsible rail (sidebar layouts, desktop only)
+ * ----------------------------------------------------------------------------
+ * The rail costs `--sidebar-width` of every page, permanently, to show a
+ * handful of words. Collapsed, it is an icon strip and the page gets the rest
+ * back; the tooltips the rows now carry become the labels (they are rendered
+ * only in this state — see Navigation.jsx).
+ *
+ * ONE LEVER does the geometry: `--sidebar-width` is REDEFINED on the root when
+ * the rail is collapsed. The rail's own `width`, the content's `margin-left`
+ * and everything else in the product that already sizes itself against that
+ * variable follow with no second rule to keep in step — and an app that has
+ * retuned `--sidebar-width` keeps its own expanded width, because only the
+ * collapsed value is stated here.
+ *
+ *   --sidebar-collapsed-width   the icon strip's width.       default: 64px
+ *
+ * The state lives on `<html>` as `data-nav-collapsed="true"`, written by
+ * Navigation from a preference remembered in localStorage (see
+ * utils/navCollapsed.js). ABSENT IS EXPANDED, so an app that has never had the
+ * toggle clicked matches not one selector in this block.
+ *
+ * EVERYTHING IS INSIDE `min-width: 1025px`. Below that the rail is the mobile
+ * drawer — a panel that slides over the page and is dismissed by tapping the
+ * backdrop — where there is no width to reclaim and no room for a second
+ * dismissal mechanism. The drawer is untouched by every rule here, and the
+ * component refuses to apply the state there as well (`railCollapsed`).
+ * ==========================================================================*/
+
+/* `.nav-label` — the label a collapsed row hides — deliberately has NO rule of
+   its own here. On the nav rows it exists only while the rail is collapsed
+   (Navigation.jsx emits the bare text node otherwise), and on the action rows
+   it is the span those rows have always rendered, now merely named. Giving it
+   so much as a `min-width` would be a declaration applying to an expanded rail
+   that was not applying to it before. The only rules that touch it are inside
+   the collapsed block below. */
+
+/* The stand-in for a row with no icon. Rendered only while collapsed, so this
+   never appears beside an expanded label. */
+.nav-initial {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.14);
+    color: var(--secondary-color);
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+/* Hidden by default, in both senses: the header layout has no rail, and below
+   1024px the rail is a drawer. Only the block below turns it on. */
+.rail-toggle {
+    display: none;
+}
+
+@media (min-width: 1025px) {
+    :root[data-nav-collapsed='true'] {
+        --sidebar-width: var(--sidebar-collapsed-width, 64px);
+    }
+
+    /* The only two properties that move, so the two move together. */
+    .aside--cms {
+        transition: width var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    .content {
+        transition: margin-left var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    /* The toggle sits ON the logo plate, absolutely positioned against it, so
+       an expanded rail is laid out exactly as it was — the logo stays centred
+       in the plate and nothing is pushed anywhere. */
+    .aside--cms .logo .rail-toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 50%;
+        right: 4px;
+        transform: translateY(-50%);
+        width: 26px;
+        height: 26px;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        border: none;
+        border-radius: var(--br);
+        background: transparent;
+        /* The plate is the near-white band, so the ink is the page's, not the
+           rail's white-on-dark. */
+        color: var(--primary-color, #1b3933);
+        opacity: 0.5;
+        cursor: pointer;
+        appearance: none;
+        transition: opacity var(--speed, 0.18s) var(--ease, ease),
+            background-color var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    .aside--cms .logo .rail-toggle:hover,
+    .aside--cms .logo .rail-toggle:focus-visible {
+        opacity: 1;
+        background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
+    }
+
+    :root[data-nav-collapsed='true'] {
+        /* With no square mark the plate holds the toggle alone (the link is
+           not rendered), so it centres rather than hugging an edge. With one,
+           the mark keeps clear of it. */
+        .aside--cms .logo .rail-toggle {
+            right: 50%;
+            transform: translate(50%, -50%);
+        }
+
+        .aside--cms .logo a {
+            max-width: calc(100% - 26px);
+            margin-right: 24px;
+        }
+
+        .aside--cms .logo a img {
+            max-width: 100%;
+            max-height: calc(var(--nav-logo-height, 50px) - 12px);
+        }
+
+        .aside--cms .logo:has(a) .rail-toggle {
+            right: 2px;
+            transform: translateY(-50%);
+        }
+
+        /* --- the nav rows ------------------------------------------------ */
+        /* The rail's own rules are five classes deep
+           (`.aside--cms .awrap .navwrap .app-nav .nav-item a`), so these
+           carry the same chain rather than relying on source order to win a
+           specificity tie. */
+        .aside--cms .awrap .navwrap .app-nav .nav-item {
+            padding: 0.15rem 0.35rem;
+        }
+
+        .aside--cms .awrap .navwrap .app-nav .nav-item > a,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > button,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > span {
+            justify-content: center;
+            gap: 0;
+            padding: 0.6rem 0;
+        }
+
+        /* The rail nudges a row's icon 8px left to sit under the label's
+           optical start. Centred in a square there is no label to sit under. */
+        .aside--cms .awrap .navwrap .app-nav .nav-item > a > svg,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > button > svg,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > span > svg {
+            right: 0;
+        }
+
+        /* A two-level menu has nowhere to open in a 64px strip; tapping a
+           group expands the rail instead (see Navigation.jsx). */
+        .aside--cms .navDropdown,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > ul {
+            display: none;
+        }
+
+        /* --- the pinned action rows -------------------------------------- */
+        .rail-actions > ul > li {
+            padding: 0.15rem 0.35rem;
+        }
+
+        .rail-actions > ul > li > a,
+        .rail-actions > ul > li > button,
+        .rail-actions > ul > li > div > a,
+        .rail-actions > ul > li > div > button {
+            justify-content: center;
+            gap: 0;
+            padding: 0.6rem 0;
+        }
+
+        /* A mounted component's label is a `::after` fed by
+           `--nav-action-label` (the account switcher, the vault palette). It
+           is the same label the row's tooltip now carries. */
+        .rail-actions > ul > li > div > a::after,
+        .rail-actions > ul > li > div > button::after {
+            display: none;
+        }
+
+        /* Every visible label, gone — but still in the accessibility tree.
+           `clip-path` plus a 1px box is the treatment that survives being
+           inside a flex row; `display: none` would take it out of the
+           accessible name as well.
+
+           TWO SELECTORS, and the long one is not decoration. This rail styles
+           `span` as a descendant of `.nav-item`, five classes deep
+           (`.aside--cms .awrap .navwrap .app-nav .nav-item span` — the rule
+           belongs to the group heading, which used to be a `<span>`), and it
+           sets a background, a display and 1.25em of padding. A one-class
+           `.nav-label` loses that cascade outright, which is a full-width
+           `--primary-color` block where a hidden label should be. The action
+           rows have no such rule, so the short selector is enough for them. */
+        .nav-label {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        .aside--cms .awrap .navwrap .app-nav .nav-item .nav-label {
+            display: block;
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+            border: 0;
+            background: none;
+        }
+
+        /* Same cascade, same answer: the initial is a `<span>` inside a
+           `.nav-item` too, so every property that makes it a circle has to be
+           restated above that rule rather than inherited from the one-class
+           definition at the top of this block. */
+        .aside--cms .awrap .navwrap .app-nav .nav-item .nav-initial {
+            display: inline-flex;
+            position: static;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            width: 22px;
+            height: 22px;
+            margin: 0;
+            padding: 0;
+            border: none;
+            border-radius: 50%;
+            background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.14);
+            color: var(--secondary-color);
+            font-size: 0.75rem;
+            font-weight: 700;
+            line-height: 1;
+            text-align: center;
+        }
+    }
+}
+
+/* ============================================================================
+ * The header bar hides its nav icons — and only the header bar
+ * ----------------------------------------------------------------------------
+ * This pair used to live inside `.app-nav .nav-item { svg { … } }`, which is a
+ * class BOTH layouts use: the one-line bar across the top and the sidebar rail
+ * down the left. So the bar's decision — the bar is a row of words, and an icon
+ * per word at that density is noise — was silently taken for the rail as well,
+ * where the icon is the point and, once collapsed, the only thing in the row.
+ *
+ * `.hwrap` is the header layout's own root element (`layout="full"`); the
+ * sidebar layouts render `.cwrap > .aside--cms` and never match it. The
+ * `full` layout's ≤1024px drawer is inside `.hwrap` too, but it draws its rows
+ * through `.drawer-nav`, not `.app-nav`, so it is unaffected either way.
+ *
+ * Both declarations are kept exactly as they were, because the bar's rendering
+ * is not what was wrong.
+ * ==========================================================================*/
+.hwrap .app-nav .nav-item svg,
+.hwrap .app-nav .nav-item-alternate svg {
+    display: none;
+    visibility: hidden;
+}

package/src/components/styles/Notification.module.scss

@@ -511,27 +511,123 @@
         transform: translateY(-50%);
     }
 
-    // Beside the rail, bottom-aligned with the row that opened it.
+    /* Beside the rail, bottom-aligned with the row that opened it.
+
+       `top: 100%; right: 0` is a panel hanging off the bottom-right corner of
+       a header chip. From a row pinned to the FOOT of a full-height rail that
+       is the bottom-left corner of the viewport: the panel drops off the
+       screen and lies half on the rail, half on the page. Anchored to the
+       row's right edge instead, it opens over the content the way a rail's
+       flyout is expected to — the gap is the only thing between it and the
+       rail, so the two read as one surface hinged at the row.
+
+       `z-index` is stated because `.rail-actions` sits at 996 (above the
+       content header's sticky 995); a panel opening from a row inside it has
+       to clear both. */
     .dropdownWrapper {
         top: auto;
         right: auto;
         bottom: 0;
-        left: calc(100% + 10px);
+        left: calc(100% + var(--nav-action-panel-gap, 10px));
         margin-top: 0;
+        z-index: 1200;
+        /* The rail's own shadow language, rather than the chip's flat drop —
+           this floats over the page, not over a bar. */
+        filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.22));
+    }
+
+    /* A column, so the list is the only part that scrolls.
+
+       The box used to be as tall as its contents with a 320px scroller inside
+       it, which from the foot of the rail grew upward past the top of the
+       viewport before the scroller ever engaged. A height cap on the BOX and
+       `min-height: 0` on the list is what makes the header, the alerts row
+       and the footer button stay put while the notifications move. */
+    .notibox {
+        display: flex;
+        flex-direction: column;
+        max-height: min(70vh, 640px);
+        /* The radius the rail's own rows wear. */
+        border-radius: var(--br, 10px);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
+    }
+
+    .notiscrollwrap {
+        flex: 1 1 auto;
+        /* Without this a flex item floors at its content height and the cap
+           above does nothing. */
+        min-height: 0;
+        max-height: none;
+    }
+
+    /* The three fixed bands around it. `flex-shrink` only — every other
+       property they own is already `!important` in the rules above and is
+       deliberately left alone. */
+    .notiboxHeader,
+    .alertsRow,
+    .notiboxActions {
+        flex: 0 0 auto;
+    }
+
+    /* The footer button was mid-grey on a grey band: the same colour as a
+       disabled control, for the one action in the panel. It is the primary
+       button the rest of the product uses, on the project's own token. */
+    .notiboxActions {
+        background-color: transparent;
+    }
+
+    .viewAllBtn {
+        background-color: var(--primary-color, #0056b3) !important;
+        color: var(--tertiary-color, #fff) !important;
+        border: 1px solid var(--primary-color, #0056b3) !important;
+        border-radius: var(--br, 8px) !important;
+        font-weight: 600 !important;
+        height: 40px !important;
+        padding: 0 20px !important;
+        max-width: none !important;
+        box-shadow: none !important;
+    }
+
+    .viewAllBtn:hover:not(:disabled) {
+        /* No second colour token to reach for — every project sets
+           `--primary-color` and not all set a darker partner — so the hover
+           is the same ink with the page showing through it. */
+        background-color: color-mix(
+            in srgb,
+            var(--primary-color, #0056b3) 88%,
+            #000
+        ) !important;
+        border-color: color-mix(
+            in srgb,
+            var(--primary-color, #0056b3) 88%,
+            #000
+        ) !important;
+        box-shadow: 0 2px 8px
+            rgba(var(--primary-color-rgb, 0, 86, 179), 0.35) !important;
+    }
+
+    .viewAllBtn:focus:not(:disabled) {
+        box-shadow: 0 0 0 2px
+            rgba(var(--primary-color-rgb, 0, 86, 179), 0.35) !important;
     }
 
     @media (max-width: 1024px) {
-        // Inside the drawer there is nothing to the right, so the panel
-        // opens upward from the row.
+        /* Inside the drawer there is nothing to the right, so the panel
+           opens upward from the row — and takes the drawer's full width
+           rather than a 360px card floating inside a 300px column. */
         .dropdownWrapper {
             left: 0;
+            right: 0;
             bottom: calc(100% + 8px);
+            filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
         }
 
-        // Keeps the panel inside a phone's viewport when the list is long —
-        // it grows from the foot of the drawer towards the header.
-        .notiscrollwrap {
-            max-height: 40vh;
+        .notibox {
+            width: 100%;
+            max-width: none;
+            /* It grows from the foot of the drawer towards the header, so it
+               gets less of the viewport than it does beside a rail. */
+            max-height: min(60vh, 520px);
         }
     }
 }
@@ -638,3 +734,39 @@
         transition: none;
     }
 }
+
+/* ----------------------------------------------------------------------------
+   …and the rail collapsed to an icon strip
+   ----------------------------------------------------------------------------
+   `<html data-nav-collapsed="true">` (Navigation writes it; see
+   utils/navCollapsed.js) means the rail is 64px wide and every row shows its
+   icon alone, with the tooltip doing the labelling. The bell draws its own
+   trigger, so the two things the rail cannot do for it are done here: drop the
+   `::after` label, and centre what is left.
+
+   Desktop only, exactly as the rail's own collapsed rules are — below 1024px
+   the rail is a drawer and the attribute is never written.
+
+   The panel itself needs nothing: it is anchored to the ROW's right edge
+   (`left: calc(100% + gap)`), so it follows the rail in and out without a
+   figure of its own.
+   ------------------------------------------------------------------------- */
+@media (min-width: 1025px) {
+    :root[data-nav-collapsed='true'] [data-nav-actions='sidebar'] {
+        .notificationTrigger {
+            justify-content: center;
+
+            &::after {
+                display: none;
+            }
+        }
+
+        /* Back on the icon's shoulder: there is no line for it to sit at the
+           end of any more. */
+        .badge {
+            top: 2px;
+            right: 8px;
+            transform: none;
+        }
+    }
+}