Use the new isTriggerInteractive tooltip prop

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>
             )}