search

woocommerce / woocommerce-ios

WooCommerce iOS app
https://www.woocommerce.com/mobile
GNU General Public License v2.0
321 stars 113 forks source link

Collect Payment bottom sheet copy is truncated with ellipsis on smaller screens #12959

Open csmcneill opened 5 months ago

csmcneill commented 5 months ago

Describe the bug When using a smaller device (e.g., an iPhone 12/13 Mini), the copy of the Collect Payment sheet introduced in https://github.com/woocommerce/woocommerce-ios/pull/12400 cannot display properly.

The copy becomes too large for the provided space, so it is truncated with an ... with no option to view the missing copy. This provides users with incomplete information about the migration.

This issue can also be reproduced if the user has increased their font size.

To Reproduce

Steps to reproduce the behavior using an iPhone 12 Mini or an iPhone 13 Mini:

  1. Open up the app.
  2. Navigate to the Menu option.
  3. Navigate to Payments.
  4. Select the Collect Payment action.
  5. Note that the copy is truncated and cannot be read in its entirety.

Steps to reproduce the behavior using a larger iOS device:

  1. Open up the app.
  2. Navigate to the Menu option.
  3. Navigate to Payments.
  4. Select the Collect Payment action.
  5. Note how the copy appears.
  6. Navigate to Settings > Display & Brightness > Text Size.
  7. Move the slider all the way to the right to increase the text size. Note: You can optionally increase text size further via Settings > Accessibility > Display & Text Size > Larger Text
  8. Return to the WooCommerce app.
  9. Note that the copy is truncated and cannot be read in its entirety.

Screenshots If applicable, add screenshots to help explain your problem.

Here is a screenshot from an iPhone 13 Mini with the smallest available text size:

Here is a screenshot from an iPhone 13 Mini with the default text size:

Here is a screenshot from an iPhone 12 Mini with the default text size:

Here is a screenshot from an iPhone 13 Mini with the largest available text size (outside of accessibility options):

Here is a screenshot from an iPhone 12 Mini with the largest available text size (inclusive of accessibility options):

Expected behavior A clear and concise description of what you expected to happen. Either:

  1. The copy is rendered completely on smaller screens.
  2. The sheet's height is increased to accommodate the copy.
  3. The descriptive copy is moved below the Add a Custom Amount button and the sheet includes a scrolling element (akin to adding a product via the app).
  4. The descriptive copy is reduced or removed.

Isolating the problem (mark completed items with an [x]):

Mobile Environment Please include:

WordPress Environment

``` ### System Status Report generated via the WooCommerce iOS app ### ### WordPress Environment ### WordPress addresss (URL): https://wcpaymarketing.mystagingwebsite.com Site address (URL): https://wcpaymarketing.mystagingwebsite.com WC Version: 8.9.2 Log Directory Writable: :heavy_check_mark: WP Version: 6.5.3 WP Multisite: – WP Memory Limit: 512 MB WP Debug Mode: – WP Cron: :heavy_check_mark: Language: en_US External object cache: :heavy_check_mark: ### Server Environment ### Server Info: nginx PHP Version: 8.3.7 PHP Post Max Size: 2 GB PHP Time Limit: 1200 PHP Max Input Vars: 6144 cURL Version: 8.7.1, OpenSSL/3.0.11 SUHOSIN Installed: – MySQL Version: 10.6.17-MariaDB-log Max Upload Size: 2 GB Default Timezone is UTC: :heavy_check_mark: fsockopen/cURL: :heavy_check_mark: SoapClient: :heavy_check_mark: DOMDocument: :heavy_check_mark: GZip: :heavy_check_mark: Multibyte String: :heavy_check_mark: Remote Post: :heavy_check_mark: Remote Get: :heavy_check_mark: ### Database ### WC Database Version: 8.9.2 Total Database Size: 3.38MB Database Data Size: 1.62MB Database Index Size: 1.76MB wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_postmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_jetpack_sync_queue: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_orders_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_admin_note_actions: Data: 0.11MB + Index: 0.02MB + Engine InnoDB wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_posts: Data: 0.08MB + Index: 0.06MB + Engine InnoDB wp_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_actionscheduler_actions: Data: 0.06MB + Index: 0.11MB + Engine InnoDB wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB wp_options: Data: 0.36MB + Index: 0.06MB + Engine InnoDB wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_addresses: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_logs: Data: 0.05MB + Index: 0.03MB + Engine InnoDB wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_orders: Data: 0.02MB + Index: 0.11MB + Engine InnoDB ### Post Type Counts ### attachment: 1 page: 7 post: 1 product: 1 shop_order_placehold: 4 wp_font_face: 33 wp_font_family: 12 wp_navigation: 1 ### Security ### Secure connection (HTTPS): :heavy_check_mark: Hide errors from visitors: :heavy_check_mark: ### Active Plugins (53) ### Akismet Anti-spam: Spam Protection: by Automattic - Anti-spam Team - 5.3.2 WooPayments: by Automattic - 7.7.0 WooCommerce: by Automattic - 8.9.2 ### Inactive Plugins (1) ### Jetpack: by Automattic - 13.5-beta ### Dropin Plugins (2) ### advanced-cache.php: advanced-cache.php object-cache.php: Memcached ### Settings ### API Enabled: – Force SSL: – Currency: USD Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) variable (variable) Taxonomies: Product Visibility: rated-4 (rated-4) rated-1 (rated-1) outofstock (outofstock) rated-3 (rated-3) exclude-from-search (exclude-from-search) exclude-from-catalog (exclude-from-catalog) rated-2 (rated-2) rated-5 (rated-5) featured (featured) Connected to WooCommerce.com: – ### WC Pages ### Shop base: #5 Cart: #6 Checkout: #7 My account: #8 Terms and conditions: :x: Page not set ### Theme ### Name: Twenty Twenty-Four Version: 1.1 Author URL: https://wordpress.org Child Theme: :x: – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme WooCommerce Support: – WooCommerce files: – Outdated templates: – ### Templates ### Overrides: /wordpress/plugins/woocommerce/8.9.2/templates/block-notices/error.php /wordpress/plugins/woocommerce/8.9.2/templates/block-notices/notice.php /wordpress/plugins/woocommerce/8.9.2/templates/block-notices/success.php ### Status report information ### Generated at: 2024-06-04 17:28:37 -0500 ```
dangermattic commented 5 months ago

Thanks for reporting! 👍