When the visible is false, the element still exists so it is taken into account by the flex spacing it just isn’t rendered. Someone else may have a better solution, but off the top of my head, the only way I can think of to filter out whether the item even exists or not, would be to produce these items via an oh-repeater and then use the filter property on the repeater to only create the elements that you need at that time. Take a look at this topic for an example of how to use the oh-repeater with complex objects that have multiple properties:
You cannot add an action to the icon if you are using f7-icon elements. The raw f7 elements do not include the OH specific actions settings, those are only available in some of the OH specific components. For what you are doing, I’d recommend the oh-link component which allows you to use the f7-icon as one of its properties and also includes all the actions function: