All views using overlay to achieve a rounded border get clipped on vertical and horizontal axes

[DominikGrodl]

Steps to reproduce

Open app and take a look at the borders of the tutorial cells (those get clipped on horizontal), or open the filters screen and see the cells. The first cell gets clipped both vertically and horizontally, all of the other cells get clipped horizontally. You can see the issue when you compare the width of the corner and the straight lines edges.

Expected behavior

Border should not be clipped.

Actual behavior

Border is clipped.

Environment

• iOS Version: 16.0
• kodeco.com App Version: Latest develop, 1.1.0
• Device: iPhone 14 Pro

[DominikGrodl]

I did some lightweight discovery and the issue is (probably) caused by combination of the stroke modifier and no padding around the view. Stroke border always places half of its lineWidth inside and half outside the view. When the modified doesn't have any padding, the border is clipped, which results in the behaviour describer earlier.

Two solutions are possible. Either adding a small padding to the modified view, or using a different method of creating a rounded border. Adding a small padding off 1 point and increasing the borderWidth to 2 points would be the best solution in my opinion.

[RobertoMachorro]

@DominikGrodl do you have a screenshot of this? Thanks!

Edit: I see it in the filters only. Your help is appreciated.

[DominikGrodl]

@RobertoMachorro sure do:

You can se it when you compare the line width of the corners and the edges of the first view, or when you compare the line widths of top edges of the two fields - the first one gets clipped, the second does not.

It's extremely minor visual bug, but I would love to fix it if you were up for it.

[RobertoMachorro]

Yes, I have now padded that with 1 and it looks better 😄

Any other place besides the filters?

[DominikGrodl]

Seems like all the tutorial cells in Library, Downloads and My Tutorials tabs also have the same issue.

[RobertoMachorro]

Fixed in PR #691 .