Use the new isTriggerInteractive tooltip prop

src/room/EncryptionLock.module.css

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .lock {
+  display: block;
   padding: var(--cpd-space-1x);
   border-radius: var(--cpd-radius-pill-effect);
 }

src/room/EncryptionLock.tsx

@@ -32,19 +32,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
-    <Tooltip label={label} side="right">
+    <Tooltip label={label} side="right" isTriggerInteractive={false}>
       <Icon
         width={16}
         height={16}
         className={styles.lock}
         data-encrypted={encrypted}
         aria-label={label}
-        // Make the icon focusable so that the tooltip can be opened
-        // with keyboard navigation
-        // TODO: Replace this with the solution from
-        // https://github.com/vector-im/compound-web/pull/130 once it
-        // lands
-        tabIndex={0}
       />
     </Tooltip>
   );

src/video-grid/VideoTile.module.css

@@ -158,7 +158,8 @@ unconditionally select the container so we can use cqmin units */
   max-inline-size: 100%;
 }
 
-.nameTag > svg {
+.nameTag > svg,
+.nameTag > span {
   flex-shrink: 0;
 }
 
@@ -170,14 +171,16 @@ unconditionally select the container so we can use cqmin units */
   color: var(--cpd-color-icon-primary);
 }
 
-.nameTag span {
+.nameTag > .name {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   padding-inline: var(--cpd-space-2x);
+  flex-shrink: 1;
 }
 
 .errorIcon {
+  display: block;
   color: var(--cpd-color-icon-critical-primary);
 }
 

src/video-grid/VideoTile.tsx

@@ -148,22 +148,20 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
         <div className={styles.fg}>
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
-            <Text as="span" size="sm" weight="medium">
+            <Text as="span" size="sm" weight="medium" className={styles.name}>
               {nameTag}
             </Text>
             {unencryptedWarning && (
-              <Tooltip label={t("common.unencrypted")} side="bottom">
+              <Tooltip
+                label={t("common.unencrypted")}
+                side="bottom"
+                isTriggerInteractive={false}
+              >
                 <ErrorIcon
                   width={20}
                   height={20}
                   aria-label={t("common.unencrypted")}
                   className={styles.errorIcon}
-                  // Make the icon focusable so that the tooltip can be opened
-                  // with keyboard navigation
-                  // TODO: Replace this with the solution from
-                  // https://github.com/vector-im/compound-web/pull/130 once it
-                  // lands
-                  tabIndex={0}
                 />
               </Tooltip>
             )}