Avatar Picker: Introduce horizontal grid layout

[pinarol]

Closes #345

From designs:

Description

Introduces the horizontally scrolling avatars. For now i didn't implement anything interactive like using number of avatars or height of the modal to decide the layout type.

https://github.com/user-attachments/assets/b9476158-388e-4b33-a8d7-31709469e66e

• Extracts the avatar view to a separate View named AvatarPickerAvatarView to be able to use it both from horizontal & vertical grids.
• Updates the UI according to designs to put the content inside the borders whether it's vertical or horizontal.
• Extracted the border code to an internal modifier function because it is used by error views too.
• Updated the demo app to add the layout options.

Testing Steps

• SwiftUI demo app > Avatar picker view > Play around with the "content layout" parameter.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Gravatar SwiftUI Prototype Build by scanning the QR code below to install the corresponding build.

	App Name	Gravatar SwiftUI Prototype Build
	Build Number	1101
	Version	1.0
	Bundle ID	com.automattic.gravatar-sdk-demo-swiftui.prototype-build
	Commit	53136e93b7ff6de8225b3447eb71865658614378
	App Center Build	Gravatar SDK Demo - SwiftUI #42

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Gravatar UIKit Prototype Build by scanning the QR code below to install the corresponding build.

	App Name	Gravatar UIKit Prototype Build
	Build Number	1101
	Version	1.0
	Bundle ID	com.automattic.gravatar-sdk-demo-uikit.prototype-build
	Commit	53136e93b7ff6de8225b3447eb71865658614378
	App Center Build	Gravatar SDK Demo - UIKit #44

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[etoledom]

One more thing:

On the Horizontal layout, it doesn't seem obvious that I can scroll horizontally when I see 3 avatars aligned on the screen. (Testing on iPhone 15 sim)

The design shows a bit of a 4th avatar appearing from the right. This helps the user see that there's more content and discover the scrolling.

Can we do this also and have this extra bit of 4th avatar appearing independent of the screen width? I know that on UICollectionView we can have a layout based on percentages of the screen, maybe there's a similar thing on SwiftUI 🤔

[pinarol]

I made some changes to avoid glitches. The horizontal version uses fixed size avatars now.

Also, I tried calculating the avatar size with the help of GeometryReader to display 3.25 avatars on every device but it is messing up the height of HorizontalAvatarGrid. I tried setting the height manually but no good way of doing it. So I left it. I made the avatar larger and the space between each avatar smaller. This way it is also more close to the designs. I think this will make it less likely to happen.

Also, it is not great to always show 3.25 avatars, it is causing giant avatars in landscape mode and in ipad. This needs a more sophisticated formula. But the bigger problem is the height of HorizontalAvatarGrid.
Can you try again? @etoledom