diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index aaacb8c72..9c885e74e 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -24,6 +24,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed a bug in `<wa-radio-button>` that prevented the pill effect from applying properly
 - Fixed a bug in `<wa-radio-button>` that prevented active buttons from receiving the correct styles
 - Fixed a bug in `<wa-button>` that prevented the focus ring from showing in Safari
+- Improved native `<details>` styles so the entire visible area is clickable
 
 ## 3.0.0-alpha.11
 
diff --git a/src/styles/native/details.css b/src/styles/native/details.css
index f7264d3fc..72f754b5b 100644
--- a/src/styles/native/details.css
+++ b/src/styles/native/details.css
@@ -8,7 +8,7 @@ details:where(:not(:host *)),
   border: var(--wa-panel-border-width) var(--border-color, var(--wa-color-surface-border)) var(--wa-panel-border-style);
   border-radius: var(--wa-panel-border-radius);
   color: var(--text-color, inherit);
-  padding: var(--spacing);
+  padding: 0;
 
   /* Print styles */
   @media print {
@@ -35,6 +35,7 @@ details:where(:not(:host *)) summary,
   user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
+  padding: var(--spacing);
 
   &::marker,
   &::-webkit-details-marker {
@@ -71,6 +72,10 @@ details:not(:host *) {
     rotate: 90deg;
   }
 
+  > :not(summary) {
+    padding: 0 var(--spacing) var(--spacing) var(--spacing);
+  }
+
   > :last-child {
     margin-block-end: 0;
   }