Commit 7da60c4bc7d for woocommerce
commit 7da60c4bc7d9cb054b043252e9136705c62ba8b4
Author: James Kemp <me@jckemp.com>
Date: Thu Mar 26 13:01:22 2026 -0400
Additional information mobile layout (#63255)
* Fix WOOPLUG-6235: Stack product attributes table on mobile
- Added responsive styles to shop_attributes table in woocommerce-smallscreen.scss
- Table rows now display as blocks on mobile devices (max-width: 768px)
- Label and value cells stack vertically for better readability
- Fixes issue where Additional Information tab content was cut off on mobile
Co-authored-by: James Kemp <jamesckemp@users.noreply.github.com>
* Add changefile(s) from automation for the following project(s): woocommerce
* Remove margin between stacked table rows on mobile
- Removed margin-bottom from tr elements for better visual cohesion
- Table borders look better without spacing between rows
Co-authored-by: James Kemp <jamesckemp@users.noreply.github.com>
* Refine shop_attributes mobile spacing and overflow
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: James Kemp <jamesckemp@users.noreply.github.com>
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/63255-cursor-WOOPLUG-6235-additional-information-mobile-layout-f8ce b/plugins/woocommerce/changelog/63255-cursor-WOOPLUG-6235-additional-information-mobile-layout-f8ce
new file mode 100644
index 00000000000..35ccd9954a8
--- /dev/null
+++ b/plugins/woocommerce/changelog/63255-cursor-WOOPLUG-6235-additional-information-mobile-layout-f8ce
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixes "Additional Information" tab content being cut off on mobile devices.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss b/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss
index c7273a004fa..4ca5127e5f3 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss
@@ -84,6 +84,45 @@
}
}
+ /**
+ * Product attributes table
+ */
+ table.shop_attributes {
+ tr {
+ display: block;
+
+ th,
+ td {
+ display: block;
+ max-width: 100%;
+ width: auto;
+ text-align: left;
+ padding: 0.5em;
+ }
+
+ th {
+ padding-bottom: 0.25em;
+ border-bottom: 0;
+ }
+
+ td {
+ padding-top: 0.25em;
+ }
+
+ th > :first-child,
+ td > :first-child {
+ padding-top: 0;
+ margin-top: 0;
+ }
+
+ th > :last-child,
+ td > :last-child {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ }
+ }
+ }
+
/**
* General layout
*/