[PR #5274] [MERGED] docs: tweak ask ai ux on smaller screen #22796

Closed
opened 2026-04-15 21:17:19 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/better-auth/better-auth/pull/5274
Author: @bytaesu
Created: 10/13/2025
Status: Merged
Merged: 10/13/2025
Merged by: @Kinfe123

Base: canaryHead: fix/floating-ai-search-ui


📝 Commits (4)

  • 16afde5 fix: adjust floating-ai-search ui
  • 02d3622 use max-w-44 instead of custom max-w-45
  • c559ef4 revert and some tweaks
  • ece5c7a auto resize height

📊 Changes

1 file changed (+63 additions, -45 deletions)

View changed files

📝 docs/components/floating-ai-search.tsx (+63 -45)

📄 Description


This PR includes the following changes in floating-ai-search:

  • No text-sm on Input for mobile sizes.
    (On iOS, small text inputs trigger zoom when focused, which results in a poor UX. The trigger point is below text-base. The base code of the shadcn-ui Input component also prevents this behavior.)

  • Fixes height issues.

  • Moves the message “AI can be inaccurate, please verify the information.” to a Popover on mobile.

... misc UI optimizations for a cleaner look.


Before:

https://github.com/user-attachments/assets/336b5c03-46cb-4817-a77e-bc68b4464ca8

After:

https://github.com/user-attachments/assets/bb1b4fb1-f036-4d04-a4ae-bbf819a001ee


Summary by cubic

Polished the floating search UI on mobile and desktop. Prevents iOS input zoom, fixes layout/height issues, and moves the disclaimer into a popover on small screens.

  • Bug Fixes

    • Prevented iOS zoom by using base text size on inputs.
    • Fixed container heights, padding, and overscroll masking.
    • Improved suggestions with horizontal scroll and fade masks.
    • Moved the disclaimer to a popover on small screens; kept inline on larger screens.
  • Refactors

    • Removed isMobile prop; standardized on sm: responsive classes.
    • Simplified overlay/trigger sizing to min(800px, 90vw) and consistent paddings.
    • Streamlined footer and borders; cleaner shadows.
    • Replaced Presence wrappers with direct conditional rendering.

🔄 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/better-auth/better-auth/pull/5274 **Author:** [@bytaesu](https://github.com/bytaesu) **Created:** 10/13/2025 **Status:** ✅ Merged **Merged:** 10/13/2025 **Merged by:** [@Kinfe123](https://github.com/Kinfe123) **Base:** `canary` ← **Head:** `fix/floating-ai-search-ui` --- ### 📝 Commits (4) - [`16afde5`](https://github.com/better-auth/better-auth/commit/16afde5ac2b9117791cdf9ef78d5b4fae3745d07) fix: adjust floating-ai-search ui - [`02d3622`](https://github.com/better-auth/better-auth/commit/02d3622c5b5763ef40f2e4d1eb2e14726b160b3a) use max-w-44 instead of custom max-w-45 - [`c559ef4`](https://github.com/better-auth/better-auth/commit/c559ef41cf8dd8219e43e67e1b7e9a0976ff74cd) revert and some tweaks - [`ece5c7a`](https://github.com/better-auth/better-auth/commit/ece5c7a01bcee704e840df5d9ebbefdb3f76aad0) auto resize height ### 📊 Changes **1 file changed** (+63 additions, -45 deletions) <details> <summary>View changed files</summary> 📝 `docs/components/floating-ai-search.tsx` (+63 -45) </details> ### 📄 Description --- This PR includes the following changes in floating-ai-search: - No text-sm on Input for mobile sizes. (On iOS, small text inputs trigger zoom when focused, which results in a poor UX. The trigger point is below text-base. The base code of the shadcn-ui Input component also prevents this behavior.) - Fixes height issues. - Moves the message “AI can be inaccurate, please verify the information.” to a Popover on mobile. ... misc UI optimizations for a cleaner look. --- ### Before: https://github.com/user-attachments/assets/336b5c03-46cb-4817-a77e-bc68b4464ca8 ### After: https://github.com/user-attachments/assets/bb1b4fb1-f036-4d04-a4ae-bbf819a001ee <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Polished the floating search UI on mobile and desktop. Prevents iOS input zoom, fixes layout/height issues, and moves the disclaimer into a popover on small screens. - **Bug Fixes** - Prevented iOS zoom by using base text size on inputs. - Fixed container heights, padding, and overscroll masking. - Improved suggestions with horizontal scroll and fade masks. - Moved the disclaimer to a popover on small screens; kept inline on larger screens. - **Refactors** - Removed isMobile prop; standardized on sm: responsive classes. - Simplified overlay/trigger sizing to min(800px, 90vw) and consistent paddings. - Streamlined footer and borders; cleaner shadows. - Replaced Presence wrappers with direct conditional rendering. <!-- End of auto-generated description by cubic. --> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-15 21:17:19 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#22796