diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css
index 3965a9729..8fb0a1165 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css
@@ -89,7 +89,7 @@
border-radius: var(--Corner-radius-Large);
padding: var(--Space-x2);
width: 360px;
- max-height: 430px;
+ max-height: 400px;
box-sizing: content-box;
box-shadow: var(--BoxShadow-Level-4);
position: absolute;
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx
index 7ec43592c..a12ea6501 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx
@@ -13,7 +13,7 @@ import { useIntl } from "react-intl"
import { useIsMounted } from "usehooks-ts"
import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Results } from "../Results"
@@ -35,7 +35,8 @@ export function ClientInline({
const isMounted = useIsMounted()
const showResults = !!results
- const showHistory = isMounted() && (!results || results.length === 0)
+ const showHistory =
+ latest.length > 0 && isMounted() && (!results || results.length === 0)
return (
@@ -101,32 +102,34 @@ export function ClientInline({
)}
-
-
- {showResults ? (
-
- ) : null}
- {showHistory ? (
-
- ) : null}
+ {showResults || showHistory ? (
+
+
+ {showResults ? (
+
+ ) : null}
+ {showHistory ? (
+
+ ) : null}
+
-
+ ) : null}
)
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx
index adadf89a8..3f21da8ef 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx
@@ -16,7 +16,7 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Results } from "../Results"
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx
index 1f5077f89..943d6b00c 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx
@@ -23,51 +23,51 @@ export function ResultsSkeleton() {
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx
index dc8c0f1e6..28e21c509 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx
@@ -3,14 +3,16 @@
import {
Collection,
Header,
+ ListLayout,
Menu,
MenuItem,
MenuSection,
Text,
+ Virtualizer,
} from "react-aria-components"
import { useIntl } from "react-intl"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./results.module.css"
@@ -25,20 +27,61 @@ export function Results({
const intl = useIntl()
return (
-
+
)
}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css
index 885e938e8..e3e4bc4f2 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css
@@ -1,13 +1,20 @@
.menu {
- display: flex;
- flex-direction: column;
- gap: var(--Space-x2);
+ height: 100%;
+ overflow-y: auto;
}
.sectionHeader {
color: var(--UI-Text-Placeholder);
padding-left: var(--Space-x1);
padding-bottom: var(--Space-x05);
+
+ /* Due to Virtualizer we cannot use gap in .menu,
+ instead we use padding-top on each section header */
+ padding-top: var(--Space-x2);
+ /* Except for the first section header */
+ .menu > div > div:first-child & {
+ padding-top: 0;
+ }
}
.item {
@@ -45,9 +52,16 @@
color: var(--Text-Tertiary);
}
-.actionsSection {
- border-top: solid 1px var(--Border-Divider-Subtle);
- padding-top: var(--Space-x2); /* match gap of .menu */
+.menuDivider {
+ padding-top: var(--Space-x2);
+ padding-bottom: var(--Space-x2);
+}
+
+.menuDivider:before {
+ display: block;
+ content: "";
+ height: 1px;
+ background: var(--Border-Divider-Subtle);
}
.actionsSection .item {