iOS/Safari - Cannot click on ingredient note without zooming in

[RemakingEden]

Spec: iPhone 8 iOS 15.5 4.7-inch (diagonal) widescreen LCD 1334-by-750-pixel resolution at 326 ppi

Pre-requisites:

• Page not zoomed in

Steps to reproduce:

1. Open recipe with notes on the ingredient prep
2. Tap a note speech bubble

Expected:

• Note would be shown as it does on Chrome

Actual:

• Ingredient is checked and no note is shown

Additional info:

• It is possible to see the note by zooming in a lot on the device, this make me think it may be a hitbox issue and that the notes hitbox is far too small on Safari
• The below image shows how zoomed in it needs to be to tap the tooltips
• 

Please let me know if you need any more details or a video etc. I'm also available to retest new fixes if you want it testing on the same hardware, thanks.

Originally posted by @RemakingEden in https://github.com/TandoorRecipes/recipes/issues/98#issuecomment-1143310423

[vabene1111]

i hate apple so much for just randomly doing stupid things everywhere 🙈 but we had a similar issue lately somewhere else, should be fixable, thanks for reporting

[smilerz]

I've noticed this and fixed it as part of model filters - but haven't had a chance to get a PR done. I think it broke when someone else was fixing some spacing on the ingredient component

<span v-b-popover.hover="ingredient.note" class="d-print-none touchable p-0 pl-md-2 pr-md-2">
      <i class="far fa-comment"></i>
  </span>

and

.touchable {
    padding-right: 2em;
    padding-left: 3em;
    margin-right: -2em;
    margin-left: -2em;
}

[jonskoglund]

Bug is still present in Chrome for iOS (110.0.5481.83) and Safari for iOS. iOS 16.3.1 Tandoor 1.4.7