Update layouts to better suit the form factor

[tiwiz]

This PR adds some fixes for layouts not displaying correctly:

• Camera Preview on tabletop distorted the image, changing the aspect ratio made it more similar to what was captured
• Main Creation pane on smaller horizontal windows needed scrolling and it was not comfortable with input types different than touch

Before	After

[gemini-code-assist]

Summary of Changes

Hello @tiwiz, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the application's adaptive layout capabilities across diverse screen sizes and orientations. It directly addresses critical display issues, such as distorted camera previews on tabletop devices and usability challenges in the main creation pane on smaller horizontal windows. The changes involve refining window size detection logic and implementing responsive UI adjustments to ensure a consistent and optimized user experience on various form factors.

Highlights

• Camera Preview Aspect Ratio Fix: Adjusted the aspect ratio for camera previews in tabletop and medium horizontal layouts to 9/16f to prevent image distortion, making the captured image appear more accurately.
• Adaptive Layout Logic Refinement: Introduced new utility functions, isHeightAtLeastMedium() and isHorizontalWindow(), and refactored the existing isAtLeastMedium() to isWidthAtLeastMedium() for more precise and granular window size class detection, improving the application's responsiveness to different screen dimensions.
• Main Creation Pane Layout Improvement: Implemented a new horizontal layout for the UploadEmptyState within the main creation pane. This layout dynamically switches based on window orientation, providing a more comfortable and scroll-free experience on smaller horizontal windows.
• Consistent Window Size Checks: Updated various screens, including Home, About, Results, and CustomizeExport, to consistently utilize the new isWidthAtLeastMedium() function for determining medium window sizes, ensuring uniform adaptive layout behavior across the application.
• New Preview Configurations: Added a landscape preview configuration for phones and a new preview for the MainCreationPane to aid in the development and testing of adaptive layouts across different device orientations and sizes.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces several improvements for adaptive layouts, which is great. The changes correctly address distorted camera previews by adjusting aspect ratios and improve the UI on smaller horizontal screens by introducing dedicated layouts.

My review includes a suggestion to refactor some new layout utility functions for better performance, to replace magic numbers with constants for improved code clarity and maintainability, and to reduce code duplication.

[gemini-code-assist]

The aspect ratio 9/16f is a magic number. To improve readability and maintainability, consider extracting it into a named constant, for example:

private const val PORTRAIT_ASPECT_RATIO = 9f / 16f

This constant can then be reused here and also on line 384 in MediumHorizontalCameraLayout.