Fix: Reduce logo size and ensure it resizes dynamically and fits all screen sizes

[SttApollo]

Fixes #8458

Description

This PR addresses #8458 where the logo on the onboarding screen flattened the text below. The WelcomeLogo composable has been updated to ensure dynamic resizing using BoxWithConstraints ensuring that the logo scales proportionally based on screen dimensions and fits properly without overlapping or pushing other components off-screen.

Changes Made

• Updated WelcomeLogo to use BoxWithConstraints for adaptive sizing.
• Limited logo and circle sizes to a maximum based on screen width.
• Ensured LazyColumnWithHeaderFooter components are unaffected by the logo's size.
• Verified compatibility across various screen sizes (small, medium, large, and tablets).

Testing

• Tested on multiple screen sizes to ensure no scrolling is required and all components fit properly.

Visual Example

[wmontwe]

@SttApollo This implementation reduces the logo size across all screen sizes, which diverges from the original design intention of making it prominent. To fix this, I suggest two changes:

1. Slighlty reduce the logo size from its original values to have more room in general.
2. Only use the shrinking logic when a certain maxWidth threshold is reached.

(Optional) Given the impracticality of fitting all page elements on every screen size, especially very small phones and in landscape mode, I think it would be more effective to use a scroll indicator in these cases.

[SttApollo]

Hii @wmontwe - thank you for your patience. I slightly reduced the logo size and added a custom scroll indicator ( I couldn't find it in the project files and wasn't sure if I could add additional libraries).

Below are additional notes, brief screen recordings and screenshots to explain this implementation. Please let me know your thoughts and I'll adjust accordingly again, as needed.

• Custom Scroll indicator caches item heights using onGloballyPositioned for accurate scroll behavior
• Inserted a spacer at index=3, ensuring small phones register sufficient overflow for the scrollbar logic to prevent situations where the footer is just slightly cut off from the screen (noticed that issue when testing on smaller devices)
• Maintained vertical space evenly design
  
  
  
  Pixel3.webm
  Pixel9ProXL.webm

[SttApollo]

Hi @wmontwe! I was trying to make sure the commit passes detekt, so I moved the scroll indicator function to a different file and shortened the welcome content. Do you want me to keep working on these changes or revert to the last commit state?

[wmontwe]

@SttApollo I rebased the pull-request on the latest version of main.

I tried the solution, but I see some performance issues with the scroll indicator that causes compose to redraw a lot.

I checked if there is another solution available, but not really. Worst case without the indicator, but I would like to look into it a bit.

[SttApollo]

@SttApollo I rebased the pull-request on the latest version of main.

I tried the solution, but I see some performance issues with the scroll indicator that causes compose to redraw a lot.

I checked if there is another solution available, but not really. Worst case without the indicator, but I would like to look into it a bit.

Sounds good - I'll hold until further. Perhaps, I can look at other bugs I can be assigned to.