@visns-studio/visns-components 6.24.4 → 6.25.0

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

@@ -54,6 +54,32 @@
                                  tallest thing in it happens to measure. Total
                                  bar height is this plus --nav-bar-padding: 52px
                                  and 4px gives the 60px bar.      default: 50px
+     --nav-header-height         the FULL height of the header bar, border
+                                 included — what the ≤1024px drawer and its
+                                 backdrop hang off, so that they start exactly
+                                 where the bar stops.
+                                 The default composes the bar's own box:
+                                 --nav-logo-height + twice --spacing-sm + the
+                                 1px bottom border, which is exact for every
+                                 project that leaves --nav-bar-padding alone.
+                                 A PROJECT THAT OVERRIDES --nav-bar-padding
+                                 MUST SET THIS TOO — nothing can read a
+                                 shorthand's vertical half back out of it, and
+                                 the failure is a drawer overlapping the bar
+                                 or floating below it.
+                    default: calc(var(--nav-logo-height, 50px) +
+                                  2 * var(--spacing-sm, 0.5rem) + 1px)
+     --nav-logo-width-sm         the cap on the logo's width below 640px. The
+                                 logo keeps --logo-width wherever that is
+                                 already narrower — this only ever shrinks.
+                                                                  default: 92px
+     --nav-badge-warn            the ground of a `tone: 'warn'` count pill. The
+                                 only two hooks here that are colour rather than
+     --nav-badge-danger          density, and they are hooks at all because the
+                                 severity grounds are stated as literals — see
+                                 the contrast note at .nav-badge-warn for why
+                                 they cannot simply read the app's tokens.
+                        defaults: #d9902a (dark ink) and #c1272d (white ink)
 
    Two deliberate omissions: the icon-to-label gap inside a nav item and the
    padding on the chips themselves are internal alignment, not density — the
@@ -269,6 +295,15 @@
             transform: rotate(180deg);
         }
 
+        /* The same caret, turned by the state a TOUCH reader's tap put on the
+           button rather than by a hover the device cannot produce. The
+           attribute is only ever rendered on a coarse pointer — see the group
+           button in Navigation.jsx — so this cannot fire on a desktop. */
+        &:has(> button[aria-expanded='true']) > button::after {
+            opacity: 1;
+            transform: rotate(180deg);
+        }
+
         &.nav-item {
             a,
             span,
@@ -434,9 +469,30 @@
                the group heading, the rows appear, tab again and focus moves
                into them — and the menu stays open because focus is still
                inside the item. Without this the dropdown was hover-only and
-               every page inside a group was unreachable without a mouse. */
-            &:hover > ul,
-            &:focus-within > ul {
+               every page inside a group was unreachable without a mouse.
+
+               FENCED BEHIND `hover: hover`, which is every mouse and every
+               trackpad and therefore leaves the desktop bar byte-identical.
+               What it excludes is the touch screen, where a "hover" is a
+               sticky artefact of the last tap that then refuses to end, and
+               `:focus-within` fights the button's own blur-on-click. Those
+               devices get the rule below instead — one mechanism at a time,
+               so the menu's open state is never two disagreeing answers. */
+            @media (hover: hover) {
+                &:hover > ul,
+                &:focus-within > ul {
+                    display: block;
+                    opacity: 1;
+                }
+            }
+
+            /* Touch: the open state is React's, published on the group button
+               as `aria-expanded` (Navigation.jsx sets the attribute ONLY on a
+               coarse pointer, which is why this needs no media query of its
+               own and cannot affect a mouse). A keyboard on a tablet lands
+               here too — Enter fires the same click handler — so nothing is
+               left unreachable by fencing the hover path above. */
+            > button[aria-expanded='true'] + ul {
                 display: block;
                 opacity: 1;
             }
@@ -560,9 +616,17 @@
                 }
             }
 
-            /* Same keyboard path as `.nav-item` above. */
-            &:hover > ul,
-            &:focus-within > ul {
+            /* Same keyboard path, and the same touch/hover split, as
+               `.nav-item` above — see the long note there. */
+            @media (hover: hover) {
+                &:hover > ul,
+                &:focus-within > ul {
+                    display: block;
+                    opacity: 1;
+                }
+            }
+
+            > button[aria-expanded='true'] + ul {
                 display: block;
                 opacity: 1;
             }
@@ -616,6 +680,48 @@
     font-variant-numeric: tabular-nums;
 }
 
+/* ---------------------------------------------------------------------------
+   Tones — how BAD the number is, not what it counts.
+   ---------------------------------------------------------------------------
+   `ok` is the block above and has no class of its own; a consumer that
+   publishes a plain number keeps exactly the green pill it has always had.
+   These two are modifiers written after it, so they win on source order at the
+   same specificity — deliberately, because anything heavier here would have to
+   be restated in the `.hactions` block below, which already positions this
+   same element.
+
+   BOTH grounds are hard-coded rather than reaching for --secondary-color the
+   way the ok pill and the bell do. In this house that token IS the green: a
+   "danger" pill written as `var(--secondary-color, #c1272d)` would resolve to
+   the same green as the default one in every project that declares the token,
+   and the fallback crimson would only ever appear in projects that do not —
+   which is precisely backwards. The public `--vs-warn` / `--vs-danger` hooks
+   from _surface.scss are honoured first so a project that has already stated
+   its palette is not overridden here.
+
+   Contrast, because the green pill shipped illegible once and a 10px digit has
+   no margin for a guess (all figures against the house ink #1b3933 and #fff):
+
+     amber #c8811b  vs ink 3.94:1   vs white 3.18:1   — neither reaches 4.5
+     amber #d9902a  vs ink 4.75:1   vs white 2.63:1   — ink clears it
+     crimson #c1272d vs ink 2.14:1  vs white 5.84:1   — white clears it
+
+   So warn is a step lighter than the library's #c8811b — the same hue, lifted
+   until the ink the ok pill already uses is legible on it, which also keeps
+   one ink across ok and warn so only the GROUND moves between them. Danger is
+   dark enough that the same ink is hopeless and takes white, which is what
+   every other crimson badge in the house does anyway.
+   ------------------------------------------------------------------------- */
+.nav-badge-warn {
+    background-color: var(--nav-badge-warn, var(--vs-warn, #d9902a));
+    color: var(--primary-color, #1b3933);
+}
+
+.nav-badge-danger {
+    background-color: var(--nav-badge-danger, var(--vs-danger, #c1272d));
+    color: #fff;
+}
+
 /* In a dropdown row the label is a block-level link, so the pill is pushed to
    the row's trailing edge rather than butted against the text. Both themed
    selectors are spelled out to match the specificity of the blocks above —
@@ -631,6 +737,15 @@
 
 .hactions {
     width: max-content;
+    /* A grid item's automatic minimum size is its CONTENT's min-content width,
+       not zero — so a cluster of nine 34px chips at `width: max-content` set a
+       floor of roughly 360px on this column, the bar's min-content width came
+       out around 530px, and on a 390px phone the browser resolved that by
+       collapsing the navigation column to nothing and letting the whole page
+       pan sideways. `min-width: 0` lets the column give way instead; the
+       cluster's own `overflow-x` below is what it gives way INTO.
+       Costs nothing above the breakpoint, where the bar has room to spare. */
+    min-width: 0;
     justify-self: end;
     position: relative;
     z-index: 1000; // Higher z-index to stay above sticky header
@@ -908,6 +1023,8 @@
 
 .hactions-alternate {
     width: max-content;
+    /* Same reason as `.hactions` — see the note there. */
+    min-width: 0;
     justify-self: end;
     position: relative;
     z-index: 1000; // Higher z-index to stay above sticky header
@@ -1355,6 +1472,20 @@
             margin: 0;
             line-height: 1.25;
             text-align: left;
+            /* STATED, not left at `normal`. A mounted component's trigger was
+               a round 36px chip before it was a row, and a chip centres its
+               lone icon — `justify-content: center` is in Sms.module.scss,
+               Vault.module.scss and Notification.module.scss alike. Left
+               unset here, that centring survives the row shell and the
+               action reads as an icon floating in the middle of a full-width
+               row with the labelled rows above and below it left-aligned.
+               The row grammar belongs to the row, so the row states it. */
+            justify-content: flex-start;
+            /* Same story, same chips: a 36/40px SQUARE is the other half of
+               being a chip, and a fixed height in a list of rows sized by
+               their own padding is a row that is visibly shorter than its
+               neighbours. A row is as tall as the padding the rail gives it. */
+            height: auto;
             text-decoration: none;
             color: var(--tertiary-color);
             background: var(--nav-bg);
@@ -1399,7 +1530,15 @@
         // trigger wears it. Empty by default, so a component that already
         // labels itself is untouched. (The notification bell sets its own
         // fallback text — see Notification.module.scss.)
-        > li > div > a::after {
+        //
+        // BOTH TRIGGER ELEMENTS, and that is the fix rather than the tidy-up:
+        // this read `> li > div > a` alone, so the account switcher — a link —
+        // wore its label and every component whose trigger is a <button>
+        // (SmsInboxBadge, VaultQuickSearch) rendered in the drawer as a bare
+        // icon with no text beside it at all. The row shell above has always
+        // matched buttons; only the label did not.
+        > li > div > a::after,
+        > li > div > button::after {
             content: var(--nav-action-label, '');
             flex: 1 1 auto;
             min-width: 0;
@@ -1574,6 +1713,14 @@
     .rail-actions {
         padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
 
+        /* The footer casts a shadow UP over the list it footers, so the band
+           above it reads as passing underneath rather than stopping at it.
+           The hairline border alone drew a floor: a list clipped at a row
+           boundary and a list that genuinely ends look identical against it,
+           which is most of why a menu with six more entries below the fold
+           read as a menu with six entries. */
+        box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, 0.55);
+
         > ul > li {
             padding: 0.2rem 0.65rem;
         }
@@ -1994,3 +2141,309 @@
         }
     }
 }
+
+/* ============================================================================
+   The header layout on a phone — the drawer (≤1024px)
+   ----------------------------------------------------------------------------
+   The sliding panel, the backdrop, the hamburger and the body scroll lock were
+   all written for the SIDEBAR layouts. The one-line header — the layout most of
+   these applications actually run — had none of it: below 1024px its answer to
+   a narrow screen was a horizontally-scrolling nav strip with the scrollbar
+   hidden, which is a menu you have to know is there to find, next to an action
+   cluster whose min-content width alone exceeded a 390px phone.
+
+   Nothing here is a second implementation of any of that. The panel IS
+   `.aside--cms`, the open state IS `.aside--cms--open`, the backdrop IS
+   `.drawer-backdrop`, the action footer IS `.rail-actions`, and the scroll lock
+   is the effect that was already keyed on the same `isOpen`. What this block
+   adds is the two things the header layout genuinely does not share: the anchor
+   (this drawer hangs off the bottom of the BAR, not off a 50px content header)
+   and the flat row list that replaces dropdowns nobody can open with a finger.
+   ========================================================================= */
+
+/* The bar's full outside height, composed rather than guessed — see the
+   `--nav-header-height` entry in this file's density-hook header, including the
+   one case a project has to state it by hand. Written as repeated additions
+   because a multiplication of a custom property is one more thing that can go
+   invalid at computed-value time for no gain. */
+$drawer-top: var(
+    --nav-header-height,
+    calc(
+        var(--nav-logo-height, 50px) + var(--spacing-sm, 0.5rem) +
+            var(--spacing-sm, 0.5rem) + 1px
+    )
+);
+
+@media (max-width: 1024px) {
+    /* The strip goes; the drawer replaces it. `> .navwrap` and not a bare
+       `.navwrap`: the sidebar layouts' own nav list wears the same class and
+       is the CONTENTS of a drawer rather than an alternative to one. */
+    .hwrap > .navwrap {
+        display: none;
+    }
+
+    /* The hamburger. Every span, every offset and every transform that folds
+       the six bars into an X is `.mobmenu`'s, unchanged — what differs is
+       placement: the content header pins its copy absolutely into a corner,
+       and this one is an item in the bar's grid.
+
+       The scale is the other change. `.mobmenu` draws inside a 60x45 box and
+       then scales the whole button to 0.4, which is a 24x18 target — under any
+       touch guideline — while still reserving all 60px of bar width, because a
+       transform does not change a layout box. 0.55 puts the DRAWN mark at
+       33x25: the box is the same order as the 34px chips at the far end, and —
+       the part 0.75 got wrong — the bars themselves thin from ~4px to ~3px and
+       stop out-weighing every glyph in the bar. (The chips draw ~18px icons
+       inside their boxes; a hamburger whose bars span the full box will always
+       read a step heavier than its box-for-box equal, so it sits a step BELOW
+       the chips' box size, not at it.) Hit-testing follows the transform, so
+       this is also the tap target — 33x25 is the same order as the chips, and
+       the bar around it is dead space, so a near miss lands on nothing. The
+       negative margins hand back the slack the untransformed box still holds
+       in layout: half of (60 - 33) across and half of (45 - 24.75) down. */
+    .hwrap .hmenu {
+        position: relative;
+        top: auto;
+        left: auto;
+        flex: none;
+        justify-self: start;
+        transform: scale(0.55);
+        margin: -10px -13.5px;
+        z-index: auto;
+    }
+
+    /* THE DRAWER. The transform, the transition curve, the width, the z-index
+       and the shadow all come from `.aside--cms` in the media block above; this
+       re-anchors it and gives it the column the header layout has no `.awrap`
+       to provide. */
+    .hwrap .aside--drawer {
+        top: #{$drawer-top};
+        left: 0;
+        height: calc(100% - #{$drawer-top});
+        display: flex;
+        flex-direction: column;
+        /* `.aside--cms` reads `--nav-bg` with no fallback, which is fine for
+           the layouts that ship with a rail and declare it. A header-layout
+           project may never have needed one, and a `var()` that resolves to
+           nothing takes the whole declaration with it — a transparent drawer
+           over the page. */
+        background: var(--nav-bg, var(--primary-color, #1b3933));
+        /* The panels the action rows open — the notification list, the account
+           switcher — are absolutely positioned inside the drawer and would be
+           cut off by `.aside--cms`'s own clip. The nav list below keeps its own
+           scroll container, so nothing here depended on that clip. */
+        overflow: visible;
+
+        /* OFF-SCREEN IS NOT ENOUGH. A translated panel is still in the tab
+           order and still in the accessibility tree, so a closed drawer parks
+           the entire menu between the hamburger and the page for anyone using a
+           keyboard or a screen reader. `visibility` removes it from both, and
+           the delay is what keeps the CLOSING slide visible: the panel stays
+           painted for exactly the length of the transform and goes at the end
+           of it. */
+        visibility: hidden;
+        transition:
+            transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
+            visibility 0s linear 0.55s;
+    }
+
+    .hwrap .aside--drawer.aside--cms--open {
+        visibility: visible;
+        transition:
+            transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
+            visibility 0s;
+    }
+
+    /* The backdrop starts where the drawer does, so the bar above it stays
+       tappable — which is what lets the hamburger close what it opened. */
+    .hwrap .drawer-backdrop {
+        top: #{$drawer-top};
+    }
+
+    /* The hairline before the LAST chip says sign-out is a different kind of
+       action from the eight before it. Below this width sign-out is a drawer
+       row and the last chip is the ticket count, so the divider would be
+       separating nothing from nothing. */
+    .hwrap .hactions > ul > li:last-child,
+    .hwrap .hactions-alternate > ul > li:last-child {
+        margin-left: var(--nav-action-gap, 2px);
+
+        &::before {
+            content: none;
+        }
+    }
+
+    /* ---------------------------------------------------------------------- *
+     * the drawer's rows
+     * ---------------------------------------------------------------------- *
+     * The band between the top of the drawer and the actions pinned under it,
+     * and the only part of the drawer that scrolls.
+     */
+    .drawer-nav {
+        flex: 1 1 auto;
+        /* Or the list refuses to shrink below its own content and pushes the
+           action footer off the bottom of the panel. */
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: var(--padding, 1rem) 0;
+
+        /* THE SCROLLBAR IS THE AFFORDANCE, and it was hidden.
+           `scrollbar-width: none` + `::-webkit-scrollbar { display: none }`
+           is the right call for the horizontal strip this file hides it on —
+           a 3px bar under a row of chips is noise. Here it is the only thing
+           on screen that says the menu continues below the fold: the band
+           stops at a full row and the pinned actions start immediately under
+           it, so a truncated list and a complete one look identical. Safari
+           on iOS honours `scrollbar-width`, so hiding it took the flashing
+           overlay indicator away too — the list scrolled and said nothing
+           about it, on the one device this drawer exists for.
+           Thin and low-contrast rather than back to the platform default. */
+        scrollbar-width: thin;
+        scrollbar-color: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.28)
+            transparent;
+
+        &::-webkit-scrollbar {
+            width: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.28);
+            border-radius: 3px;
+        }
+
+        /* The page behind the drawer is frozen by a scroll lock on <body>,
+           which iOS Safari does not honour for the viewport scroller. Without
+           this, a swipe that reaches either end of the list — and on first
+           open the list IS at its top — chains into the page underneath and
+           the drawer reads as a menu that will not move. */
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
+
+        > ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        /* The same gutter `.app-nav .nav-item` and `.rail-actions > ul > li`
+           use at this width, so the three bands of the drawer line up. */
+        > ul > li {
+            width: 100%;
+            padding: 0.2rem 0.65rem;
+            box-sizing: border-box;
+        }
+
+        /* A row: full width, one line, a finger-sized target. The pill is
+           pushed to the trailing edge rather than butted against the label —
+           the labels here are of wildly different lengths and an inline badge
+           would land in a different place on every line.
+
+           THERE IS NO HOVER RULE ANYWHERE IN THIS DRAWER, deliberately. On the
+           devices it exists for, `:hover` is whatever was tapped last and stays
+           lit until something else is tapped — a row that looks selected
+           because you scrolled past it. The current page is marked by `.active`
+           below, which is a fact rather than an artefact.
+
+           `font-size` is stated rather than inherited for the reason every list
+           in this house states it: global.css carries
+           `ul { font-size: clamp(1rem, 2vw, 1.25rem) }` and an element selector
+           beats a class. */
+        a {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.5rem;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0.85rem 1rem;
+            line-height: 1.3;
+            color: var(--tertiary-color, #fff);
+            font-size: 1rem;
+            font-weight: var(--font-weight-medium, 500);
+            text-decoration: none;
+            border-radius: var(--br, 5px);
+
+            &:focus-visible {
+                outline: 2px solid
+                    var(--nav-active-bar-color, var(--highlight-color, #fff));
+                outline-offset: -2px;
+            }
+        }
+
+        a.active {
+            background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.12);
+            font-weight: var(--font-weight-semibold, 600);
+        }
+    }
+
+    /* A group's NAME, and not a control: it has no page of its own, and it has
+       nothing left to disclose because its rows are already open beneath it. So
+       it takes the section-label voice — small, quiet, uppercase — and no tap
+       target at all. A <button> that opens a dropdown is precisely what does
+       not work on a touch screen, and is the reason this drawer exists. */
+    .drawer-heading {
+        display: block;
+        padding: 1rem 1rem 0.35rem;
+        color: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.5);
+        font-size: 0.72rem;
+        font-weight: 600;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+    }
+
+    /* Indented under the heading that names it, with a rule down the left so
+       the grouping survives being scrolled past its own heading. */
+    .drawer-child > a {
+        padding-left: 1.75rem;
+        border-left: 2px solid
+            rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.12);
+        border-radius: 0 var(--br, 5px) var(--br, 5px) 0;
+    }
+}
+
+/* ----------------------------------------------------------------------------
+   A drawer shorter than its own footer
+   ----------------------------------------------------------------------------
+   The pinned footer is `flex: 0 0 auto` — it takes its content height and the
+   list takes what is left, which is the rail's arrangement and the right one
+   while there IS anything left. A phone in LANDSCAPE is 393px tall: the panel
+   is that minus the bar, and six labelled action rows are taller than all of
+   it. The list is then squeezed to zero and the navigation — the entire reason
+   the drawer exists — is not reachable by any gesture.
+
+   So below this height the drawer stops being two bands and becomes one
+   scroller: the list and the actions scroll together, everything is reachable,
+   and the footer is simply the end of the list. The cost is that the panels
+   those action rows open are clipped by the new scroll container, and it is
+   the right cost — a 350px-tall popover has nowhere to open on a 393px screen
+   whether or not anything clips it.
+   ------------------------------------------------------------------------- */
+@media (max-width: 1024px) and (max-height: 600px) {
+    .hwrap .aside--drawer {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .drawer-nav {
+        flex: 0 0 auto;
+        overflow: visible;
+    }
+}
+
+/* The mark, on a phone. 130px of logo beside a hamburger and three chips is the
+   difference between the bar fitting a 390px screen and not, and a mark is the
+   one thing in the bar that is still recognisable at two thirds the size.
+   `min()` so this can only ever SHRINK: a project whose --logo-width is already
+   narrower than the cap keeps its own figure. The logo's own gutter tightens
+   with it — a hairline with 16px either side reads as a gap, not a divider,
+   once everything around it has closed up. */
+@media (max-width: 640px) {
+    .hwrap .logo {
+        width: min(var(--logo-width, 130px), var(--nav-logo-width-sm, 92px));
+        margin-right: var(--spacing-sm, 0.5rem);
+        padding-right: var(--spacing-sm, 0.5rem);
+    }
+}

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

@@ -967,6 +967,77 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     font-size: 0.75rem; // 12px at a 16px root
 }
 
+// ---------------------------------------------------------------------------
+// Mounted in the sidebar rail, and in the mobile drawer
+// ---------------------------------------------------------------------------
+// `actionsPlacement: 'sidebar'` — and, below 1024px, the header layout's
+// drawer — draws the account actions as full-width rows instead of chips. The
+// block that holds them advertises itself with `data-nav-actions="sidebar"`
+// (Navigation.jsx / Navigation.module.scss `.rail-actions`), which is all this
+// file needs to know. Notification.module.scss carries the same block for the
+// bell; this is the copy for the inbox badge, and it exists because a chip and
+// a row are two different things in three places.
+//
+// The row's box — full width, the rail's padding, left-aligned, and the LABEL
+// beside the icon — all come from `.rail-actions`. The trigger publishes no
+// label of its own, so the row publishes one as `--nav-action-label` and the
+// rail hangs it off the trigger's `::after`. Only what this file would
+// otherwise force back is restated here.
+[data-nav-actions='sidebar'] {
+    // The chip's lift and scale read as a stray button in a list of rows.
+    // The focus ring is left alone — it is the only keyboard affordance the
+    // row has.
+    .trigger {
+        &:hover,
+        &:focus,
+        &:active {
+            transform: none;
+        }
+
+        &:hover {
+            background-color: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.05);
+            color: var(--secondary-color);
+        }
+    }
+
+    // Was pinned to the corner of a round 40px chip, which on a full-width
+    // row is the row's top-right corner, floating clear of the count it
+    // belongs to. At the end of the line is where the eye lands after the
+    // label.
+    .badge {
+        top: 50%;
+        right: 14px;
+        transform: translateY(-50%);
+    }
+
+    // `top: 100%` drops the popover below the row. These rows are pinned to
+    // the FOOT of the rail, so that is below the foot of the viewport.
+    // Beside the rail, bottom-aligned with the row that opened it.
+    .popoverWrapper {
+        top: auto;
+        right: auto;
+        bottom: 0;
+        left: calc(100% + 10px);
+        margin-top: 0;
+    }
+
+    @media (max-width: 1024px) {
+        // Inside the drawer there is nothing to the right, so the panel
+        // opens upward from the row.
+        .popoverWrapper {
+            left: 0;
+            bottom: calc(100% + 8px);
+        }
+
+        // Keeps the panel inside a phone's viewport when the list is long —
+        // it grows from the foot of the drawer towards the header, and 360px
+        // of rows plus a head and a footer is taller than the room above.
+        .rows {
+            max-height: 40vh;
+        }
+    }
+}
+
 // ---------------------------------------------------------------------------
 // SmsInbox — the page
 // ---------------------------------------------------------------------------
@@ -1703,6 +1774,27 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     background: var(--s-surface);
 }
 
+// Stands exactly where the composer does on a receive-only thread - one from an
+// alphanumeric sender ID, which has no handset behind it to answer. The pane
+// keeps its footer and its height; what changes is that the footer explains
+// itself instead of offering a control that could not work.
+.receiveOnly {
+    box-sizing: border-box;
+    padding: 0.6rem 0.7rem 0.7rem;
+    border-top: 1px solid var(--s-line);
+    background: var(--s-surface);
+
+    .banner {
+        // The sentence wraps on a narrow pane, so the icon sits with the first
+        // line rather than floating in the middle of a two-line block.
+        align-items: flex-start;
+
+        svg {
+            margin-top: 0.15rem;
+        }
+    }
+}
+
 // Stands exactly where the composer does while the timeline is being picked
 // over, so the pane keeps its height and its one footer.
 .selectBar {