fix: fix button group styling in Safari/iOS

Author: hperrin

packages/button/_mixins.scss

@@ -37,6 +37,12 @@
   .smui-button__group {
     display: inline-flex;
 
+    & > .mdc-button,
+    & > .smui-button__group-item > .mdc-button {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
     & > .mdc-button:not(:last-child),
     & > .smui-button__group-item:not(:last-child) > .mdc-button {
       border-top-right-radius: 0;
@@ -66,6 +72,7 @@
 }
 
 @mixin smui-button__group-mdc-button--raised_($query) {
+  @include mdc-button-shape-radius(small, $query: $query);
   @include mdc-elevation(0, $query: $query);
 
   &:hover,

site/src/routes/demo/button.scss

@@ -9,15 +9,6 @@
   --notchSize: #{$mdc-shape-small-component-radius * 2};
 
   // source: https://css-tricks.com/notched-boxes/
-  clip-path:
-    polygon(
-      0% var(--notchSize),
-      var(--notchSize) 0%,
-      calc(100% - var(--notchSize)) 0%,
-      100% var(--notchSize),
-      100% calc(100% - var(--notchSize)),
-      calc(100% - var(--notchSize)) 100%,
-      var(--notchSize) 100%,
-      0% calc(100% - var(--notchSize))
-    );
+  -webkit-clip-path: polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));
+  clip-path: polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));
 }