Improve Safe Area and Layout Handling in Landscape Mode for Smartphones

[tsutsu3]

Describe the bug

When using the app in landscape mode on smartphones with on-screen cameras (notch or punch-hole) and a screen width exceeding 900px, multiple UI issues occur due to improper Safe Area handling and layout constraints. These issues impact usability and readability, particularly when displaying interactive elements like the keyboard or modals.

Issues

• Content Cutoff: Certain UI elements are cut off by the camera area due to lack of Safe Area handling.
• Keyboard Overflow: When the keyboard is displayed, content may overflow, making some UI elements inaccessible.
• Modal Display Issues:
  • Some sections of the modal are not visible.
  • The text area within modals is too narrow, causing readability issues.

To Reproduce

1. Use a smartphone with an on-screen camera (e.g., punch-hole or notch display).
2. Rotate the device to landscape mode.
3. Observe issues with cut-off content, layout overflow, and modal readability.

Expected behavior

• Safe Area support should be implemented properly in landscape mode.
• Keyboard handling should adjust the layout dynamically to prevent overflow.
• Modals should be fully visible, and text areas should have a comfortable width for reading.

Screenshots

Environments

Additional context

See

https://developer.android.com/about/versions/15/behavior-changes-15?hl=ja#edge-to-edge

Report

1 件の対応策 推奨
お客様のアプリは、エッジ ツー エッジで非推奨の API またはパラメータを使用しています
エッジ ツー エッジおよびウィンドウの表示のために使用または設定している API またはパラメータの 1 つ以上が、Android 15 で非推奨になりました。お客様のアプリでは、サポートが終了した以下の API またはパラメータが使用されています。

android.view.Window.setNavigationBarDividerColor
android.view.Window.setStatusBarColor
android.view.Window.setNavigationBarColor
android.view.Window.setDecorFitsSystemWindows
これらは次の場所で開始します。

b1.c.s
com.google.android.material.datepicker.o.L
d1.z0.a
io.flutter.plugin.platform.e.a
io.github.tsutsu3.pi_hole_client.MainActivity.A
この問題を解決するには、これらの API またはパラメータの使用をやめてください。

ユーザー エクスペリエンス
リリース名: 0.9.0

Possible Solutions:

• Implement Safe Area insets dynamically based on device type and orientation.
• Adjust keyboard handling to avoid content overflow.
• Modify modal width dynamically to ensure all content remains readable.
• In landscape mode, display the navbar label next to the icon