@bytebrand/fe-ui-core-autobahn 1.0.162 → 1.0.164

package/locales/de/autobahn.json

@@ -485,7 +485,8 @@
       "ratings": "Bewertungen"
     },
     "section": {
-      "similar": "Ähnliche Fahrzeuge"
+      "similar": "Ähnliche Fahrzeuge",
+      "unavailableSimilar": "Ähnliche / vergleichbare Fahrzeuge"
     },
     "breadcrumb": {
       "home": "Start",

package/locales/en/autobahn.json

@@ -485,7 +485,8 @@
       "ratings": "Ratings"
     },
     "section": {
-      "similar": "Similar vehicles"
+      "similar": "Similar vehicles",
+      "unavailableSimilar": "Similar / comparable vehicles"
     },
     "breadcrumb": {
       "home": "Home",

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.162",
-  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
-  "main": "index.ts",
-  "license": "UNLICENSED",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.20",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.164",
+  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
+  "main": "index.ts",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.20",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/ui/Dropdown.tsx

@@ -22,6 +22,7 @@ import * as ReactDOM from 'react-dom';
 
 import Icon from './Icon';
 import { usePortalMenuPosition } from './usePortalMenuPosition';
+import { scrollFieldIntoView } from './scrollFieldIntoView';
 
 export interface DropdownOption {
   value: string;
@@ -189,15 +190,22 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     if (allowCustomValue) setQuery(value || '');
   }, [disabled, selectedIndex, allowCustomValue, value]);
 
-  // when opened searchable, focus the search input instead of leaving focus on the trigger.
-  // scrollIntoView first: on mobile the keyboard is about to eat ~40% of the viewport, so the
-  // trigger (and the popover below it) needs to already be scrolled above the fold before focus
-  // fires, or the popover can end up hidden behind the keyboard with no way to see it open.
+  // Scroll the trigger (searchable or not) to the top of the page on open, THEN — searchable
+  // only — focus the search input instead of leaving focus on the trigger. Every Dropdown shares
+  // this, not just searchable ones: on mobile a trigger sitting mid-page can open a menu that
+  // runs off the bottom of the viewport with no way to see the rest of it, same underlying
+  // problem a searchable trigger has with the keyboard eating the space below it. A plain
+  // `scrollIntoView({block:'center'})` used to run here (searchable-only) — "center" only moves
+  // the trigger when it's already near a viewport edge, so on a trigger that's roughly mid-page
+  // already (the common case) it was a near no-op, leaving a few hundred px of dead space above
+  // the trigger that the keyboard (searchable) or the menu's own bottom edge (any dropdown) then
+  // ran into.
   React.useEffect(() => {
-    if (!open || !searchable) return;
-    if (rootRef.current && rootRef.current.scrollIntoView) {
-      rootRef.current.scrollIntoView({ block: 'center', behavior: 'smooth' });
-    }
+    if (!open) return;
+    if (rootRef.current) scrollFieldIntoView(rootRef.current);
+    // searchRef is only ever attached in the searchable+open (editing) render branch, so this
+    // naturally no-ops for a non-searchable dropdown — nothing else to focus there, the trigger
+    // <button> already has focus from the click/keypress that opened it.
     if (searchRef.current) {
       searchRef.current.focus();
       // pre-filled custom value (see openMenu) starts selected, so typing immediately

package/ui/index.ts

@@ -39,6 +39,8 @@ export type { FormFieldProps } from './FormField';
 export { default as Dropdown } from './Dropdown';
 export type { DropdownProps, DropdownOption } from './Dropdown';
 
+export { scrollFieldIntoView } from './scrollFieldIntoView';
+
 export { default as Spec } from './Spec';
 export type { SpecProps } from './Spec';
 

package/ui/scrollFieldIntoView.ts

@@ -0,0 +1,41 @@
+// Autobahn (auto.de redesign) — shared "scroll a just-opened/just-focused field to the top of the
+// page" behaviour, used by Dropdown.tsx and by fe-main's DualRange/RateSlider (FilterContent.tsx)
+// text fields on /search/detailed. On mobile, opening a dropdown's menu or focusing a text field
+// brings the on-screen keyboard up and/or needs room for a popover below the field — if the field
+// is sitting mid-page, there may not be enough space left below it once the keyboard/menu takes
+// its share. Scrolling the field to the very top of the page first maximizes what's available.
+//
+// Extracted out of Dropdown.tsx so it can be shared verbatim with fe-main's non-Dropdown form
+// fields (DualRange/RateSlider's text inputs) — same problem, same fix, one place to keep them
+// from drifting apart. See Dropdown.tsx's own call site for the original reasoning this was
+// pulled from.
+export function scrollFieldIntoView(field: HTMLElement): void {
+  if (typeof window === 'undefined') return;
+  // Mobile-only: the on-screen-keyboard/popover space problem this fixes doesn't exist on
+  // desktop, where there's no keyboard pushing the viewport around. Same breakpoint + matchMedia
+  // pattern as Modal.tsx/CardCarousel.tsx elsewhere in this lib.
+  if (window.matchMedia('(min-width: 601px)').matches) return;
+  // Anchor on whichever is higher up: the field itself, or a short field label/caption sitting
+  // directly above it (own previous sibling, or — the common "label above a row of controls"
+  // shape, e.g. "Marke & Modell" above the Make/Model row on /search/detailed — the wrapping
+  // row's previous sibling). Checked by height, not by class name, so this works for ANY
+  // caller's label without this needing to know that call site's specific markup.
+  const MAX_LABEL_HEIGHT = 30;
+  const asLabel = (el: Element | null): HTMLElement | null => {
+    if (!(el instanceof HTMLElement)) return null;
+    const h = el.getBoundingClientRect().height;
+    return h > 0 && h <= MAX_LABEL_HEIGHT ? el : null;
+  };
+  const anchor =
+    asLabel(field.previousElementSibling) ||
+    asLabel(field.parentElement && field.parentElement.previousElementSibling) ||
+    field;
+  // No sticky-header reservation here: every current caller (NewMainPage '/', FilterContent on
+  // '/search*') sits on a page where TopBar's own autoHideOnScroll is on (App.tsx: isHomePage ||
+  // isSearchPage) — the header slides itself out of the way the instant this scroll starts,
+  // independently of this call, so reserving space for it here would double-count.
+  const GAP = 8;
+  const rect = anchor.getBoundingClientRect();
+  const targetY = window.scrollY + rect.top - GAP;
+  window.scrollTo({ top: Math.max(0, targetY), behavior: 'smooth' });
+}

package/ui/usePortalMenuPosition.ts

@@ -79,6 +79,20 @@ const ESTIMATED_MENU_HEIGHT = 300;
 // a scroll within this window of opening REPOSITIONS instead of closing — see the effect below.
 const SELF_SCROLL_GRACE_MS = 500;
 
+// Module-level (not hook-local) so Dropdown.tsx's own searchable-open scroll effect can reuse the
+// exact same measurement — the sticky app header (.topbar, position:sticky/top:0) sits over the
+// top of the viewport on every page that uses it (TopBar's autoHideOnScroll is opt-in, off by
+// default — most pages keep it permanently docked), so anything that scrolls/positions content
+// near the top of the viewport needs to stop at its live bottom edge, not y=0. Reading the
+// header's live bottom edge (0 when absent, e.g. inside a modal, or when autoHideOnScroll has slid
+// it away) gives a correct boundary without hardcoding a pixel height that could drift from the
+// header's own CSS.
+export const getSafeTop = (): number => {
+  if (typeof document === 'undefined') return 0;
+  const header = document.querySelector('.topbar');
+  return header ? Math.max(0, header.getBoundingClientRect().bottom) : 0;
+};
+
 export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivElement>({
   enabled,
   open,
@@ -121,18 +135,6 @@ export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivEleme
     };
   }, [enabled, open, portalRoot]);
 
-  // the portal menu's z-index (1400, .mselect-menu--portal) is intentionally higher than every
-  // other fixed overlay it must paint over (checkout sheets/modals) — which also means it would
-  // paint over the sticky app header (.topbar, position:sticky/top:0/z-index:50) if left
-  // unconstrained. Reading the header's live bottom edge (0 when absent, e.g. inside a modal, or
-  // when TopBar's autoHideOnScroll has slid it away) gives a correct top boundary without
-  // hardcoding a pixel height that could drift from the header's own CSS.
-  const getSafeTop = (): number => {
-    if (typeof document === 'undefined') return 0;
-    const header = document.querySelector('.topbar');
-    return header ? Math.max(0, header.getBoundingClientRect().bottom) : 0;
-  };
-
   const [menuPos, setMenuPos] = React.useState<PortalMenuPos | null>(null);
 
   const positionMenu = React.useCallback(() => {