it honestly really looks like the last row is a kind of copy / paste together somehow without clear structure. You should consider to clean this up. You seem to have a block within a block in the first column of your last row. You define blocks with all kind of parameters as if they were labels, icons or links, making the block dependent to show if an item has a state. I still cannot figure out the purpose of all those block parameters. This makes it hard to give you an advise how to re-position your icon/link propperly. Usually you can work with “absolute” parameter or define the row with a class like below. This works in your case if the widget you are using is always fixed in size, but you should think that the widget is probably used on multiple devices with multiple sizes.
- component: f7-row
config:
class:
- float-right
slots:
default:
- component: f7-icon
config:
f7: arrowshape_turn_up_right
size: 16
style:
opacity: 0.5
bottom: 18px
right: -7px
color: rgb(0,0,0,0.5)
or like here:
- component: f7-icon
config:
material: park
size: 60px
color: green
style:
opacity: 40%
position: absolute
top: 120px
right: 16px
Here is a good post with explanation how to use rows and columns to position items well: