[PR #8435] fix(settings): improve shortcuts reset button hover and tile layout #8352

New issue

Open

opened 2026-03-23 23:23:48 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:23:48 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/8435
Author: @Akkii88
Created: 1/16/2026
Status: 🔄 Open

Base: main ← Head: fix/settings-ui-improvements-8222

📝 Commits (4)

b0c4a6e fix: prevent mobile toolbar from being hidden behind keyboard on Android
f72b001 fix: improve settings shortcuts UI consistency and layout (#8222)
488e48b fix(settings): improve shortcuts reset button hover and tile layout
76d9500 fix(toolbar): use cached keyboard height and clarify safety margin

📊 Changes

2 files changed (+29 additions, -11 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart (+15 -6)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_shortcuts_view.dart (+14 -5)

📄 Description

Feature Preview

Reset Button Hover Effect: Added a hover state to the 'Reset to default' button in Settings > Shortcuts. It now changes color and background on hover for better visual feedback.
Shortcut Tile Layout: Improved the layout of shortcut tiles to prevent text overflow issues and ensure the 'Edit' button and keybindings are always properly aligned on the right side.

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

Summary by Sourcery

Improve Android mobile toolbar positioning relative to the keyboard and refine the Settings shortcuts UI behavior and layout.

New Features:

Add hover styling for the 'Reset to default' shortcuts button, including background and icon/text color changes.

Bug Fixes:

Ensure the mobile editor toolbar on Android correctly tracks the visible keyboard height using viewInsets to avoid being obscured.
Prevent shortcut setting tile text from causing layout issues by allowing the label area to flex instead of forcing expansion.

Enhancements:

Add a small safety margin to the Android keyboard height calculation to keep the toolbar clear of the keyboard toolbar.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/8435 **Author:** [@Akkii88](https://github.com/Akkii88) **Created:** 1/16/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `fix/settings-ui-improvements-8222` --- ### 📝 Commits (4) - [`b0c4a6e`](https://github.com/AppFlowy-IO/AppFlowy/commit/b0c4a6ed9db10683fb787c8a1ddda23a8b27c95e) fix: prevent mobile toolbar from being hidden behind keyboard on Android - [`f72b001`](https://github.com/AppFlowy-IO/AppFlowy/commit/f72b0016b1c52fb3929a3930dfb7e1652a66e532) fix: improve settings shortcuts UI consistency and layout (#8222) - [`488e48b`](https://github.com/AppFlowy-IO/AppFlowy/commit/488e48b3c73cc39318c372d156a9ef9c0fe4da34) fix(settings): improve shortcuts reset button hover and tile layout - [`76d9500`](https://github.com/AppFlowy-IO/AppFlowy/commit/76d95004da74f7c3e04c5bd0667b800074f6eb66) fix(toolbar): use cached keyboard height and clarify safety margin ### 📊 Changes **2 files changed** (+29 additions, -11 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart` (+15 -6) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_shortcuts_view.dart` (+14 -5) </details> ### 📄 Description ### Feature Preview - **Reset Button Hover Effect**: Added a hover state to the 'Reset to default' button in Settings > Shortcuts. It now changes color and background on hover for better visual feedback. - **Shortcut Tile Layout**: Improved the layout of shortcut tiles to prevent text overflow issues and ensure the 'Edit' button and keybindings are always properly aligned on the right side. #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [x] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [x] All existing tests are passing. ## Summary by Sourcery Improve Android mobile toolbar positioning relative to the keyboard and refine the Settings shortcuts UI behavior and layout. New Features: - Add hover styling for the 'Reset to default' shortcuts button, including background and icon/text color changes. Bug Fixes: - Ensure the mobile editor toolbar on Android correctly tracks the visible keyboard height using viewInsets to avoid being obscured. - Prevent shortcut setting tile text from causing layout issues by allowing the label area to flex instead of forcing expansion. Enhancements: - Add a small safety margin to the Android keyboard height calculation to keep the toolbar clear of the keyboard toolbar. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>