When the user hovers over the mat-grid-tile, a div displays its content. However, I'm facing issues with the size of the div as it appears to be constrained within the mat-grid-tile.
Here is how it looks before hovering: https://i.sstatic.net/Xqgdq.jpg
And this is how it appears when hovering: https://i.sstatic.net/PeUR6.jpg
I want it to look like this on hover: https://i.sstatic.net/nNUal.jpg
HTML:
<mat-grid-tile *ngFor="let quickPhrase of phrases.QuickPhraseList ; let i = index" [attr.data-index]="i"
[ngClass]="{'selected':phraseSelected === quickPhrase.Phrase}" >
<div class="phrase-box">
<p>{{quickPhrase.PhraseTitle != null ? quickPhrase.PhraseTitle.substring(0,25) : "Add Title"}}</p>
<span>
<p class="hover-phrase-title"><strong>Title:</strong><br>{{quickPhrase.PhraseTitle}}</p>
<p class="hover-phrase-content"><strong>Quick Phrase:</strong><br>{{quickPhrase.Phrase}}</p>
</span>
</div>
<<mat-icon *ngIf="false" mat-list-icon dndHandle>
drag_handle
</mat-icon>
</mat-grid-tile>