make sure pills of joinable room take 100% width if they can

ts/components/basic/PillContainer.tsx

@@ -15,8 +15,9 @@ const StyledPillContainerHoverable = styled.div<PillContainerProps>`
 
   position: relative;
   flex-direction: 'row';
-
-  width: 50%;
+  flex-shrink: 0;
+  min-width: 50%;
+  max-width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   align-items: center;
@@ -31,7 +32,7 @@ const StyledPillInner = styled.div<PillContainerProps>`
   display: flex;
   flex-direction: 'row';
   flex-grow: 1;
-  flex: 1 1 40%;
+  flex-shrink: 0;
 
   overflow: hidden;
   white-space: nowrap;

ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx

@@ -88,48 +88,11 @@ const StyledRoomName = styled(Flex)`
   padding: 0 10px;
 `;
 
-const StyledToolTip = styled.div`
-  padding: var(--margins-sm);
-  background: var(--color-clickable-hovered);
-  font-size: var(--font-size-xs);
-  border: 1px solid var(--color-pill-divider);
-  display: inline-block;
-  position: absolute;
-  white-space: normal;
-
-  top: 100%;
-  left: 10%;
-
-  border-radius: 300px;
-  z-index: 5;
-  opacity: 1;
-  animation: fadeIn 0.5s ease-out;
-
-  max-width: 80%;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-  }
-`;
-
 const SessionJoinableRoomName = (props: JoinableRoomProps) => {
   return <StyledRoomName>{props.name}</StyledRoomName>;
 };
 
 const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
-  const [isHovering, setIsHovering] = useState(false);
-
-  const handleMouseEnter = () => {
-    setIsHovering(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHovering(false);
-  };
-
-  const showTooltip = isHovering;
-
   return (
     <PillTooltipWrapper>
       <PillContainerHoverable
@@ -138,14 +101,10 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
         }}
         margin="5px"
         padding="5px"
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
       >
         <SessionJoinableRoomAvatar {...props} />
         <SessionJoinableRoomName {...props} />
       </PillContainerHoverable>
-
-      {showTooltip && false && <StyledToolTip>{props.name}</StyledToolTip>}
     </PillTooltipWrapper>
   );
 };