UI issues on mobile #183
Open
UI issues on mobile #183
+94
−22
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Before: inputmode='numeric' caused mobile keyboards to show numeric keypad without Enter key, preventing users from adding tip values by pressing Enter. After: Changed to inputmode='decimal' which shows numeric keyboard WITH Enter key on mobile, allowing users to type tip percentages and press Enter to add them.
Before: Receipts button (receipt_long icon) and Fullscreen button (grid icon) were overlapping/partially visible behind each other in the top-right FAB menu on mobile. The buttons appeared stacked but one was visible behind the other, making it difficult to see which button was which and interact with them properly. After: - Reduce top-right offset on mobile (8px vs 18px) for better spacing - Hide external labels on mobile to prevent overlap - Add proper spacing and z-index between FAB action buttons - Ensure buttons stack properly without visual overlap - Matches Quasar's lt.sm breakpoint (< 600px) for consistency
Before: Wallet and Tip Wallet select fields were displaying long alphanumeric wallet IDs (e.g., '06e47bb0335a4a66a3983047348fe') that overflowed beyond the input field boundaries on mobile screens. The text extended outside the visible field area, making it difficult to see the full wallet ID and creating a poor user experience. After: - Added mobile-only CSS to truncate long wallet IDs with ellipsis when they overflow - Applied text-overflow: ellipsis only to wallet select fields on mobile - Text truncation only occurs when content actually overflows (not for short IDs) - Matches Quasar's lt.sm breakpoint (< 600px) for consistency
…n config page Fixes mobile display issue where items table overflowed and items didn't show properly (see screenshot). - Hide id, tax, and disabled columns on mobile (< 600px) - Show only delete, edit, title, and price columns on mobile - Added CSS to ensure table fits and truncates long text - Items now display properly in the list on mobile devices
Collaborator
|
This has been fixed for a while now. What screen size is that, and what TPoS version are you using? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PrintButton topping others
Overflowing wallet-id
Items columns too much/items invisible
