diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss
index 566a5a56d..824d1823c 100644
--- a/src/core/features/search/components/global-search-result/global-search-result.scss
+++ b/src/core/features/search/components/global-search-result/global-search-result.scss
@@ -21,6 +21,7 @@
margin-bottom: 0px;
--padding: 0px;
background: transparent;
+ flex-shrink: 0;
}
ion-icon, .result-icon {
@@ -28,6 +29,7 @@
height: var(--core-global-search-result-icon-size);
margin-inline-end: var(--spacing-2);
+ flex-shrink: 0;
}
}
@@ -61,20 +63,33 @@
}
- .result-context {
+ .result-context-wrapper {
display: flex;
- justify-items: center;
- align-items: center;
- color: var(--core-global-search-result-context-color);
- margin-top: var(--spacing-2);
- font-size: 12px;
+ flex-wrap: wrap;
+ flex-direction: row;
- ion-icon {
- margin-inline-end: var(--spacing-1);
- }
+ .result-context {
+ display: flex;
+ justify-items: center;
+ align-items: center;
+ color: var(--core-global-search-result-context-color);
+ margin-top: var(--spacing-2);
+ margin-inline-end: var(--spacing-4);
+ font-size: 12px;
+
+ ion-icon {
+ margin-inline-end: var(--spacing-1);
+ flex-shrink: 0;
+ }
+
+ core-format-text {
+ color: var(--core-global-search-result-context-color);
+ }
+
+ span {
+ white-space: normal;
+ }
- + .result-context {
- margin-inline-start: var(--spacing-4);
}
}
diff --git a/src/core/features/search/stories/components/components.module.ts b/src/core/features/search/stories/components/components.module.ts
index bfece68ca..1e59da784 100644
--- a/src/core/features/search/stories/components/components.module.ts
+++ b/src/core/features/search/stories/components/components.module.ts
@@ -20,13 +20,11 @@ import { CommonModule } from '@angular/common';
import {
CoreSearchGlobalSearchResultsPageComponent,
} from '@features/search/stories/components/global-search-results-page/global-search-results-page';
-import { CoreSearchGlobalSearchResultComponent } from '@features/search/components/global-search-result/global-search-result';
import { CoreSharedModule } from '@/core/shared.module';
@NgModule({
declarations: [
CoreSearchGlobalSearchResultsPageComponent,
- CoreSearchGlobalSearchResultComponent,
],
imports: [
CoreSharedModule,
diff --git a/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts b/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts
index 8e4dd3dd3..6154c5d22 100644
--- a/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts
+++ b/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts
@@ -107,6 +107,26 @@ export class CoreSearchGlobalSearchResultsPageComponent {
iconurl: 'https://master.mm.moodledemo.net/theme/image.php?theme=boost&component=core&image=i%2Fsection',
},
},
+ {
+ id: 8,
+ url: '',
+ title: 'This item has long text everywhere, so make sure that it looks good anyways. ' +
+ 'Even if the screen you\'re using is also big, this should still be a problem because this text is *really* long.',
+ content: 'You would normally see lorem ipsum here, but we decided to just write some gibberish here to make it more ' +
+ 'real. We all know that lorem ipsum is fabricated text, and even though it serves its purpose, it isn\'t as ' +
+ 'engaging as some real, hand-crafted text (not sure why this should be engaging, anyways).',
+ context: {
+ courseName: 'And it\'s not just the title, either. Other things like the Course title also take more than ' +
+ 'you would expect in a normal site (or even not so normal).',
+ userName: 'To top it off, it has a user name as well! What is this madness? Well, at some point you just have to ' +
+ 'get creative. Honestly, I\'m surprised if you\'re even reading this. Kudos to you for being thorough.',
+ },
+ module: {
+ name: 'book',
+ iconurl: 'assets/img/mod/book.svg',
+ area: '',
+ },
+ },
];
/**