Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(dogfooding) improve desktop layout #846

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

renefloor
Copy link
Contributor

🎯 Goal

Describe why we are making this change
After making PR #845 I also wanted to make the app usable on wider displays. On multiple screens the layout breaks when you have a wide window.

🛠 Implementation details

Describe the implementation

On the home screen and the login screen I mainly made sure that the logo is not getting huge. I set the max width of that screen to 500px as the web implementation also doesn't get much wider than that. But we can discuss that value.

The lobby had the buttons weirdly aligned to the right, I added that to the max width that was already there.

The buttons on the call screen are very close to the bottom, so I added a bit of padding there.

🎨 UI Changes

Add relevant screenshots

Before After
Screenshot 2025-02-06 at 16 35 15 Screenshot 2025-02-06 at 16 36 51
Screenshot 2025-02-06 at 16 35 39 Screenshot 2025-02-06 at 16 37 04
Screenshot 2025-02-06 at 16 35 54 Screenshot 2025-02-06 at 16 37 12
Screenshot 2025-02-06 at 16 36 04 Screenshot 2025-02-06 at 16 37 21
Simulator Screenshot - iPhone 16 Pro - 2025-02-06 at 16 41 19 Simulator Screenshot - iPhone 16 Pro - 2025-02-06 at 16 41 58

🧪 Testing

Explain how this change can be tested (or why it can't be tested)

To test the desktop changes you need to combine this branch with #845 to have it running on macos.
It should not effect smaller screens, but could be good to test on mobile devices as well.

☑️Contributor Checklist

General

  • Assigned a person / code owner group (required)
  • Thread with the PR link started in a respective Slack channel (#flutter-team) (required)
  • PR is linked to the GitHub issue it resolves

☑️Reviewer Checklist

  • Sample runs & works
  • UI Changes correct (before & after images)
  • Bugs validated (bugfixes)
  • New feature tested and works
  • All code we touched has new or updated Documentation

@renefloor renefloor requested a review from a team as a code owner February 6, 2025 15:51
Copy link
Member

@xsahil03x xsahil03x left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added few suggestions, overall looks good to me 🚀

Copy link
Contributor

@Brazol Brazol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants