Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy (#11002)

* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Update a Jest snapshot

* Update a Jest snapshot

res/css/views/rooms/_AppsDrawer.pcss

@@ -254,20 +254,13 @@ limitations under the License.
     }
 }
 
-.mx_AppTileBody,
+/* Rules added to this selector style appTileBody generally */
-.mx_AppTileBody_mini {
+.mx_AppTileBody {
-    width: 100%;
+    /* Apply to every variant of appTileBody */
-    overflow: hidden;
     border-radius: 8px;
-    height: var(--AppTileBody-height);
-
-    iframe {
-        border: none;
-        width: 100%;
-        height: 100%;
-    }
 
     /* const loadingElement */
+    /* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
     .mx_AppTileBody_fadeInSpinner {
         /* place spinner and the message at the center of mx_AppTileBody */
         height: 100%;
@@ -279,9 +272,21 @@ limitations under the License.
         animation-delay: 500ms;
         animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
     }
+
+    &.mx_AppTileBody--large,
+    &.mx_AppTileBody--mini {
+        width: 100%;
+        overflow: hidden;
+        height: var(--AppTileBody-height);
+
+        iframe {
+            border: none;
+            width: 100%;
+            height: 100%;
+        }
     }
 
-.mx_AppTileBody {
+    &.mx_AppTileBody--large {
         --AppTileBody-height: 100%;
 
         background-color: $widget-body-bg-color;
@@ -294,18 +299,11 @@ limitations under the License.
         }
     }
 
-.mx_AppTileBody_mini {
+    &.mx_AppTileBody--mini {
         --AppTileBody-height: var(--AppTile_mini-height);
     }
 
-.mx_AppTile .mx_AppTileBody,
+    &.mx_AppTileBody--loading {
-.mx_AppTileFullWidth .mx_AppTileBody,
-.mx_AppTile_mini .mx_AppTileBody_mini {
-    height: inherit;
-    flex: 1;
-}
-
-.mx_AppTile_loading {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -315,12 +313,21 @@ limitations under the License.
 
         /* match bg of border so that the cut corners have the right fill */
         background-color: $widget-body-bg-color !important;
-    border-radius: 8px;
 
         iframe {
             display: none;
         }
     }
+}
+
+/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
+   so rules to style appTileBody generally should not be included here. */
+.mx_AppTile .mx_AppTileBody--large,
+.mx_AppTileFullWidth .mx_AppTileBody--large,
+.mx_AppTile_mini .mx_AppTileBody--mini {
+    height: inherit;
+    flex: 1;
+}
 
 @keyframes mx_AppTileBody_fadeInSpinnerAnimation {
     from {

src/components/views/elements/AppTile.tsx

@@ -596,9 +596,10 @@ export default class AppTile extends React.Component<IProps, IState> {
             "microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write; " + "clipboard-read;";
 
         const appTileBodyClass = classNames({
-            mx_AppTileBody: !this.props.miniMode,
+            "mx_AppTileBody": true,
-            mx_AppTileBody_mini: this.props.miniMode,
+            "mx_AppTileBody--large": !this.props.miniMode,
-            mx_AppTile_loading: this.state.loading,
+            "mx_AppTileBody--mini": this.props.miniMode,
+            "mx_AppTileBody--loading": this.state.loading,
         });
         const appTileBodyStyles: CSSProperties = {};
         if (this.props.pointerEvents) {

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -43,7 +43,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
         id="1"
       >
         <div
-          class="mx_AppTileBody mx_AppTile_loading"
+          class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
         >
           <div
             class="mx_AppTileBody_fadeInSpinner"
@@ -230,7 +230,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
       </span>
     </div>
     <div
-      class="mx_AppTileBody"
+      class="mx_AppTileBody mx_AppTileBody--large"
     >
       <div
         class="mx_AppPermission"
@@ -383,7 +383,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
             </span>
           </div>
           <div
-            class="mx_AppTileBody mx_AppTile_loading"
+            class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
           >
             <div
               class="mx_AppTileBody_fadeInSpinner"