Move gr-overlay to dialog element for rv-reviewers plugin

Release-Notes: skip
Google-Bug-Id: b/268160926
Change-Id: I76adcad53493d3e0dc81d0d64eccdb8c1806edb5

web/rv-reviewers.ts

diff --git a/web/rv-reviewers.ts b/web/rv-reviewers.ts
index 9e77037..847812d 100644
--- a/web/rv-reviewers.ts
+++ b/web/rv-reviewers.ts
@@ -22,13 +22,6 @@
 import {css, CSSResult, html, LitElement} from 'lit';
 import './rv-edit-screen';
 
-// TODO: This should be defined and exposed by @gerritcodereview/typescript-api
-type GrOverlay = Element & {
-  open(): void;
-  close(): void;
-  fit(): void;
-};
-
 declare global {
   interface HTMLElementTagNameMap {
     'rv-reviewers': RvReviewers;
@@ -47,8 +40,8 @@
 
 @customElement('rv-reviewers')
 export class RvReviewers extends LitElement {
-  @query('#rvScreenOverlay')
-  rvScreenOverlay?: GrOverlay;
+  @query('#rvScreenModal')
+  rvScreenModal?: HTMLDialogElement;
 
   /** Guaranteed to be set by the `repo-command` endpoint. */
   @property({type: Object})
@@ -70,12 +63,13 @@
   static override get styles() {
     return [
       window.Gerrit.styles.font as CSSResult,
+      window.Gerrit.styles.modal as CSSResult,
       css`
         :host {
           display: block;
           margin-bottom: var(--spacing-xxl);
         }
-        #rvScreenOverlay {
+        #rvScreenModal {
           width: 50em;
           overflow: auto;
         }
@@ -97,25 +91,24 @@
       <div>
         <p>
           Allows you to define rules for when specific groups or accounts should
-          automatically be added as reviewers or CC to a change.
+          automatically be added as reviewers or CCs to a change.
         </p>
       </div>
       <div>
-        <gr-button @click="${() => this.rvScreenOverlay?.open()}">
+        <gr-button @click="${() => this.rvScreenModal?.showModal()}">
           Edit Reviewers Config
         </gr-button>
       </div>
-      <gr-overlay id="rvScreenOverlay" with-backdrop>
+      <dialog id="rvScreenModal">
         <rv-edit-screen
           .pluginRestApi="${this.pluginRestApi}"
           .repoName="${this.repoName}"
           .loading="${this.loading}"
           .canModifyConfig="${this.canModifyConfig}"
-          @close="${() => this.rvScreenOverlay?.close()}"
-          @fit="${() => this.rvScreenOverlay?.fit()}"
+          @close="${() => this.rvScreenModal?.close()}"
         >
         </rv-edit-screen>
-      </gr-overlay>
+      </dialog>
     `;
   }