From 5f4ede83cb859acfe68988aae06e968d8b05f152 Mon Sep 17 00:00:00 2001 From: Stjepan Grgic Date: Thu, 19 Feb 2026 15:45:05 +0000 Subject: [PATCH 1/4] AG-16490 - Search modal height fix --- .../src/components/search/SearchHits.module.scss | 8 +++++--- .../src/components/search/SearchModal.module.scss | 11 ++++------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/external/ag-website-shared/src/components/search/SearchHits.module.scss b/external/ag-website-shared/src/components/search/SearchHits.module.scss index 1260ea77021..c634b670b49 100644 --- a/external/ag-website-shared/src/components/search/SearchHits.module.scss +++ b/external/ag-website-shared/src/components/search/SearchHits.module.scss @@ -6,7 +6,11 @@ padding-bottom: $spacing-size-4; font-size: 18px; border-top: 1px solid var(--color-border-secondary); - max-height: calc(var(--container-height) - var(--input-height)); + max-height: min( + calc(var(--max-container-height) - var(--input-height) - var(--controls-height)), + calc(100vh - var(--input-height) - var(--controls-height) - var(--top-offset) - var(--bottom-offset)) + ); + overflow: auto; overscroll-behavior: contain; @@ -21,8 +25,6 @@ } @media screen and (min-width: $breakpoint-docs-search-small) { - max-height: calc(100vh - 450px); - &::after { content: ''; position: fixed; diff --git a/external/ag-website-shared/src/components/search/SearchModal.module.scss b/external/ag-website-shared/src/components/search/SearchModal.module.scss index 4c402bcd1bb..5432a2c9dd8 100644 --- a/external/ag-website-shared/src/components/search/SearchModal.module.scss +++ b/external/ag-website-shared/src/components/search/SearchModal.module.scss @@ -47,26 +47,23 @@ } .container { + --top-offset: 50px; + --bottom-offset: 64px; --input-height: 76px; --controls-height: 66px; - --container-height: calc(100vh - 180px); + --max-container-height: 800px; position: fixed; - top: 50px; + top: var(--top-offset); left: 50%; transform: translateX(-50%); width: 850px; max-width: calc(100vw - #{$spacing-size-8}); - max-height: var(--container-height); background: var(--color-bg-primary); border-radius: 12px; box-shadow: 0px 25px 50px -12px rgba(16, 24, 40, 0.25); overflow: hidden; - @media screen and (min-width: $breakpoint-docs-search-small) { - --container-height: calc(100vh - 100px); - } - #{$selector-darkmode} & { background: color-mix(in srgb, var(--color-bg-primary), var(--color-fg-primary) 6%); } From c4951064713300fff34fe581f13e105d55b76416 Mon Sep 17 00:00:00 2001 From: Stjepan Grgic Date: Thu, 19 Feb 2026 16:53:34 +0000 Subject: [PATCH 2/4] AG-16490 - Removed the gradient on the bottom of the Search modal --- .../components/search/SearchHits.module.scss | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/external/ag-website-shared/src/components/search/SearchHits.module.scss b/external/ag-website-shared/src/components/search/SearchHits.module.scss index c634b670b49..e6c51c34ed8 100644 --- a/external/ag-website-shared/src/components/search/SearchHits.module.scss +++ b/external/ag-website-shared/src/components/search/SearchHits.module.scss @@ -23,26 +23,6 @@ position: relative; z-index: 1; } - - @media screen and (min-width: $breakpoint-docs-search-small) { - &::after { - content: ''; - position: fixed; - width: 100%; - height: $spacing-size-24; - left: 0; - bottom: var(--controls-height); - background-image: linear-gradient(transparent, var(--color-bg-primary)); - pointer-events: none; - - #{$selector-darkmode} & { - background-image: linear-gradient( - transparent, - color-mix(in srgb, var(--color-bg-primary), var(--color-fg-primary) 6%) - ); - } - } - } } .hit { From e6326b9c50f16763a69bc00759fe6ebfca743a08 Mon Sep 17 00:00:00 2001 From: Stjepan Grgic Date: Fri, 20 Feb 2026 10:30:37 +0000 Subject: [PATCH 3/4] AG-16490 - Made search results smaller and updated styling --- .../search/SearchControls.module.scss | 2 +- .../src/components/search/SearchHits.jsx | 14 ++-- .../components/search/SearchHits.module.scss | 72 +++++++++++-------- .../components/search/SearchModal.module.scss | 2 +- 4 files changed, 52 insertions(+), 38 deletions(-) diff --git a/external/ag-website-shared/src/components/search/SearchControls.module.scss b/external/ag-website-shared/src/components/search/SearchControls.module.scss index 16f3fdfff40..509ae48a1ac 100644 --- a/external/ag-website-shared/src/components/search/SearchControls.module.scss +++ b/external/ag-website-shared/src/components/search/SearchControls.module.scss @@ -10,7 +10,7 @@ .controlsOuter { justify-content: flex-end; gap: $spacing-size-4; - padding: $spacing-size-4 $spacing-size-6; + padding: 0 $spacing-size-5; height: var(--controls-height); border-top: 1px solid var(--color-border-secondary); diff --git a/external/ag-website-shared/src/components/search/SearchHits.jsx b/external/ag-website-shared/src/components/search/SearchHits.jsx index 169fb8a80df..a7567fe03b2 100644 --- a/external/ag-website-shared/src/components/search/SearchHits.jsx +++ b/external/ag-website-shared/src/components/search/SearchHits.jsx @@ -99,11 +99,15 @@ export default ({ closeModal, structuredHits, selectedHit, setSelectedHit, query -

- {hit.title} - {hit.heading && <> - {hit.heading}} -

-

{hit.text}

+
+

+ {hit.title} + + {hit.heading && <> - {hit.heading}} + +

+

{hit.text}

+
); diff --git a/external/ag-website-shared/src/components/search/SearchHits.module.scss b/external/ag-website-shared/src/components/search/SearchHits.module.scss index e6c51c34ed8..5b93b30b704 100644 --- a/external/ag-website-shared/src/components/search/SearchHits.module.scss +++ b/external/ag-website-shared/src/components/search/SearchHits.module.scss @@ -27,38 +27,36 @@ .hit { position: relative; - display: grid; - grid-template: - 'icon title' min-content - 'icon text' min-content / max-content 1fr; - margin: 0 $spacing-size-4; - padding: $spacing-size-4; + gap: $spacing-size-4; + display: flex; + margin: 0 $spacing-size-6; + padding: $spacing-size-3; border-radius: var(--radius-md); cursor: pointer; + align-items: center; &[data-selected='true'] { - background: rgba(4, 75, 147, 1); + background-color: var(--color-brand-50); + box-shadow: inset 0px 0px 0px 1px var(--color-brand-300); z-index: 1; #{$selector-darkmode} & { - background-color: var(--color-brand-300); - span, - p { - color: var(--color-bg-primary); - } + background-color: var(--color-bg-secondary); + } + :global(.icon) { + --icon-color: var(--color-text-brand-primary); } } } .hitIcon { - grid-area: icon; display: flex; align-items: center; justify-content: center; - width: 52px; - height: 52px; - margin-right: $spacing-size-4; + flex: none; + width: 40px; + height: 40px; border-radius: var(--radius-md); - background-color: var(--color-bg-secondary); + background-color: var(--color-bg-primary); border: 1px solid var(--color-border-primary); box-shadow: var(--shadow-xs); @@ -67,8 +65,9 @@ } :global(.icon) { - --icon-size: #{$spacing-size-8}; - --icon-color: var(--color-bg-brand-solid); + --icon-size: #{$spacing-size-6}; + --icon-color: var(--color-fg-secondary); + transition: none; //There is a transition set to the global icon that makes this color change appear slow #{$selector-darkmode} & { --icon-color: var(--color-fg-primary); @@ -77,6 +76,11 @@ } } +.hitTextWrapper { + max-width: 100%; + overflow: hidden; +} + .titleSection, .title, .text { @@ -85,30 +89,32 @@ text-decoration: none; overflow: hidden; font-size: var(--text-fs-base); + width: 100%; - [data-selected='true'] & { - color: var(--color-bg-primary); + // [data-selected='true'] & { + // color: var(--color-text-brand-primary); - #{$selector-darkmode} & { - color: var(--color-white); - } - } + // #{$selector-darkmode} & { + // color: var(--color-white); + // } + // } } .titleSection { - grid-area: title; margin-bottom: 0; } .title { color: var(--color-fg-primary); font-weight: var(--text-semibold); + [data-selected='true'] & { + color: var(--color-text-brand-primary); + } } .text { - grid-area: text; font-weight: var(--text-regular); - color: var(--text-color-secondary); + font-size: var(--text-fs-sm); // Disable Safari's automatic tooltip for truncated text &::after { @@ -118,15 +124,14 @@ } .crumbContainer { - padding: $spacing-size-3 0 $spacing-size-3 $spacing-size-8; - padding-bottom: $spacing-size-2; + padding: $spacing-size-3 0 $spacing-size-2 $spacing-size-6; } .crumb { font-weight: var(--text-semibold); text-decoration: none; color: var(--color-text-primary); - font-size: var(--text-fs-base); + font-size: var(--text-fs-sm); #{$selector-darkmode} & { color: var(--color-white); @@ -163,4 +168,9 @@ .hitLink { color: var(--color-text-tertiary); + + // fixes hover inherited color styles on the text + &:hover { + color: inherit; + } } diff --git a/external/ag-website-shared/src/components/search/SearchModal.module.scss b/external/ag-website-shared/src/components/search/SearchModal.module.scss index 5432a2c9dd8..df8db8da35b 100644 --- a/external/ag-website-shared/src/components/search/SearchModal.module.scss +++ b/external/ag-website-shared/src/components/search/SearchModal.module.scss @@ -50,7 +50,7 @@ --top-offset: 50px; --bottom-offset: 64px; --input-height: 76px; - --controls-height: 66px; + --controls-height: 56px; --max-container-height: 800px; position: fixed; From 28b416b703b0bcf50f01c03cb11a9d8bd576a691 Mon Sep 17 00:00:00 2001 From: Stjepan Grgic Date: Fri, 20 Feb 2026 14:32:26 +0000 Subject: [PATCH 4/4] AG-16490 - Cleanup and converted variables into static values --- .../src/components/search/SearchBox.module.scss | 2 +- .../components/search/SearchControls.module.scss | 2 +- .../src/components/search/SearchHits.module.scss | 15 +-------------- .../src/components/search/SearchModal.module.scss | 8 +------- 4 files changed, 4 insertions(+), 23 deletions(-) diff --git a/external/ag-website-shared/src/components/search/SearchBox.module.scss b/external/ag-website-shared/src/components/search/SearchBox.module.scss index bbd65ef55ce..8ebf34a7516 100644 --- a/external/ag-website-shared/src/components/search/SearchBox.module.scss +++ b/external/ag-website-shared/src/components/search/SearchBox.module.scss @@ -26,7 +26,7 @@ input[type='search'].searchInput { width: 100%; - height: var(--input-height); + height: 76px; padding: $spacing-size-6 $spacing-size-6 $spacing-size-6 $spacing-size-16; font-size: 20px; border: none; diff --git a/external/ag-website-shared/src/components/search/SearchControls.module.scss b/external/ag-website-shared/src/components/search/SearchControls.module.scss index 509ae48a1ac..10077a188bd 100644 --- a/external/ag-website-shared/src/components/search/SearchControls.module.scss +++ b/external/ag-website-shared/src/components/search/SearchControls.module.scss @@ -11,7 +11,7 @@ justify-content: flex-end; gap: $spacing-size-4; padding: 0 $spacing-size-5; - height: var(--controls-height); + height: 56px; border-top: 1px solid var(--color-border-secondary); #{$selector-darkmode} & { diff --git a/external/ag-website-shared/src/components/search/SearchHits.module.scss b/external/ag-website-shared/src/components/search/SearchHits.module.scss index 5b93b30b704..981fc290754 100644 --- a/external/ag-website-shared/src/components/search/SearchHits.module.scss +++ b/external/ag-website-shared/src/components/search/SearchHits.module.scss @@ -6,11 +6,7 @@ padding-bottom: $spacing-size-4; font-size: 18px; border-top: 1px solid var(--color-border-secondary); - max-height: min( - calc(var(--max-container-height) - var(--input-height) - var(--controls-height)), - calc(100vh - var(--input-height) - var(--controls-height) - var(--top-offset) - var(--bottom-offset)) - ); - + max-height: min(643px, calc(100vh - 246px)); overflow: auto; overscroll-behavior: contain; @@ -90,14 +86,6 @@ overflow: hidden; font-size: var(--text-fs-base); width: 100%; - - // [data-selected='true'] & { - // color: var(--color-text-brand-primary); - - // #{$selector-darkmode} & { - // color: var(--color-white); - // } - // } } .titleSection { @@ -157,7 +145,6 @@ --icon-size: #{$spacing-size-10}; --icon-color: var(--color-text-secondary); opacity: 0.7; - margin-bottom: $spacing-size-2; } diff --git a/external/ag-website-shared/src/components/search/SearchModal.module.scss b/external/ag-website-shared/src/components/search/SearchModal.module.scss index df8db8da35b..000201ea06e 100644 --- a/external/ag-website-shared/src/components/search/SearchModal.module.scss +++ b/external/ag-website-shared/src/components/search/SearchModal.module.scss @@ -47,14 +47,8 @@ } .container { - --top-offset: 50px; - --bottom-offset: 64px; - --input-height: 76px; - --controls-height: 56px; - --max-container-height: 800px; - position: fixed; - top: var(--top-offset); + top: 50px; left: 50%; transform: translateX(-50%); width: 850px;