refactor: rename inspector styles for consistency

The admin inspector was originally named the "viewer". It was renamed
before the feature was first merged, but some instances of the old term
were missed.

assets/css/admin.scss

@@ -1,4 +1,4 @@
-@import "admin/viewer";
+@import "admin/inspector";
 
 #app {
   font-family: sans-serif;

assets/css/admin/viewer.scss → assets/css/admin/inspector.scss

@@ -1,10 +1,10 @@
-.viewer {
+.inspector {
   display: flex;
   gap: 0.5em;
   align-items: stretch;
 }
 
-.viewer__controls {
+.inspector__controls {
   display: flex;
   flex: 0 0 24em;
   flex-direction: column;
@@ -39,7 +39,7 @@
   }
 }
 
-.viewer__modal {
+.inspector__modal {
   width: 80%;
   max-width: 1024px;
 
@@ -64,7 +64,7 @@
   }
 }
 
-.viewer__screen {
+.inspector__screen {
   flex: 1 1 auto;
 
   iframe {

assets/src/components/admin/inspector.tsx

@@ -75,8 +75,8 @@ const Inspector: ComponentType = () => {
   useLayoutEffect(adjustFrame, [zoom]);
 
   return (
-    <div className="viewer">
-      <div className="viewer__controls">
+    <div className="inspector">
+      <div className="inspector__controls">
         <h1>Inspector</h1>
 
         {config && (
@@ -109,7 +109,7 @@ const Inspector: ComponentType = () => {
         )}
       </div>
 
-      <div className="viewer__screen">
+      <div className="inspector__screen">
         <iframe
           name={INSPECTOR_FRAME_NAME}
           onLoad={adjustFrame}
@@ -247,9 +247,9 @@ const ConfigControls: ComponentType<{ screen: ScreenWithId }> = ({
         </button>
       </div>
 
-      <dialog className="viewer__modal" ref={dialogRef}>
+      <dialog className="inspector__modal" ref={dialogRef}>
         <button
-          className="viewer__modal__close-button"
+          className="inspector__modal__close-button"
           onClick={() => {
             dialogRef.current?.close();
             setEditableConfig(null);
@@ -433,14 +433,14 @@ const AudioControls: ComponentType<{ screen: ScreenWithId }> = ({ screen }) => {
             )}
           </div>
 
-          <dialog className="viewer__modal" ref={dialogRef}>
+          <dialog className="inspector__modal" ref={dialogRef}>
             <button
-              className="viewer__modal__close-button"
+              className="inspector__modal__close-button"
               onClick={() => setSSML(null)}
             >
               × Close
             </button>
-            <div className="viewer__modal__ssml">{ssml}</div>
+            <div className="inspector__modal__ssml">{ssml}</div>
           </dialog>
 
           {playingAt && (
@@ -478,11 +478,11 @@ const adjustScreenFrame = (
 ) => {
   if (ref.current?.contentWindow) {
     const doc = ref.current.contentWindow.document;
-    let style = doc.getElementById("viewer-injected-style");
+    let style = doc.getElementById("inspector-injected-style");
 
     if (!style) {
       style = doc.createElement("style");
-      style.id = "viewer-injected-style";
+      style.id = "inspector-injected-style";
       doc.head.appendChild(style);
     }