enhance(dialog): use MaterialAlertDialogBuilder (#3491)

* Fix example insets

* Add app-region: drag

* Use `Theme.Material3.DayNight.NoActionBar`

* Re-generate some kotlin files

* Use MaterialAlertDialogBuilder

* Add change file

* Revert back to margin-top: 0.5rem

* Re-generate outdated gradle wrapper from #3039

* Move title bar to its own file

* Fix cancel message

examples/api/src/app.css

@@ -8,6 +8,11 @@
   font-family: 'Rubik', sans-serif;
 }
 
+button {
+  color: inherit;
+  background-color: inherit;
+}
+
 ::-webkit-scrollbar {
   width: 0.25rem;
   height: 3px;
@@ -33,27 +38,34 @@ code.code-block {
   width: 18.75rem;
 }
 
-@media screen and (max-width: 640px) {
+@media screen and (width < 640px) {
   #sidebar {
     --translate-x: -18.75rem;
     transform: translateX(var(--translate-x));
   }
 }
 
-.sidebar-toggle {
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
+#sidebar,
+main {
+  padding-top: calc(env(safe-area-inset-top) + 2rem);
 }
 
-body {
-  overflow: hidden;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right)
-    env(safe-area-inset-bottom) env(safe-area-inset-left);
+#sidebar {
+  padding-left: calc(env(safe-area-inset-left) + 0.5rem);
+}
+
+main {
+  padding-right: env(safe-area-inset-right);
+}
+
+#sidebarToggle {
+  margin-top: calc(env(safe-area-inset-top) + 0.5rem);
+  margin-left: calc(env(safe-area-inset-left) + 0.5rem);
 }
 
 #sidebar,
 #console {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
 }
 
 .transparent {