MOBILE-3371 search: Improve styles for long items

src/core/components/mod-icon/mod-icon.scss

@@ -27,6 +27,12 @@
         }
     }
 
+    &.other {
+        img {
+            filter: var(--filter);
+        }
+    }
+
 }
 
 img {

src/core/features/search/components/global-search-result/global-search-result.html

@@ -11,7 +11,7 @@
             <core-format-text [text]="result.title"></core-format-text>
         </h3>
         <core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content"></core-format-text>
-        <div *ngIf="renderedContext" class="flex-row">
+        <div *ngIf="renderedContext" class="result-context-wrapper">
             <div *ngIf="renderedContext.courseName" class="result-context">
                 <ion-icon name="fas-graduation-cap" aria-hidden="true"></ion-icon>
                 <core-format-text [text]="renderedContext.courseName"></core-format-text>

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-wrapper {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+
             .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);
             }
 
         }

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,

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: '',
+            },
+        },
     ];
 
     /**