title: mat-form-field overlapping into button below
body: <p>i have a problem with a mat-form-field overlapping into a button. Making it so only the lower half is clickable.</p>
  <p>I have the app hosted here on AWS <a href="https://main.d225v44fsxss8s.amplifyapp.com/selector" rel="nofollow noreferrer">https://main.d225v44fsxss8s.amplifyapp.com/selector</a></p>
  <p>The problem is with the query button on the bottom left. It is being overlapped by the T_positions form field.</p>
  <p><a href="https://i.stack.imgur.com/ueFjj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ueFjj.png" alt="enter image description here" /></a></p>
  <p>I have modified the form field sizes a bit but the issue still happens if i have all of those values to default.</p>
  <p>I have tried adjusting the z-index of the button but that hasnt worked.</p>
  <p>Edit:
  I also have another problem. That one is with the little info boxes.
  Ideally i would want them to be sizes in such a way that their width is equal to the largest sentence they contain.</p>
  <p>or alternatively that they always stretch from their position to the right of the screen.</p>
  <p>but i havent managed to get either working so far.
  <a href="https://i.stack.imgur.com/wGZXM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wGZXM.png" alt="enter image description here" /></a></p>