diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
index 3e731a281..7c02a3e11 100644
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -1,50 +1,50 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import { IoIosMore } from 'react-icons/io/index.js';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './chat-thread-list.css';
 import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react.js';
 
 type Props = {
   +threadInfo: ThreadInfo,
   +unread: boolean,
 };
 function ChatThreadListSeeMoreSidebars(props: Props): React.Node {
   const { unread, threadInfo } = props;
   const { pushModal, popModal } = useModalContext();
 
   const onClick = React.useCallback(
     () =>
       pushModal(
         <SidebarsModal
           defaultTab="My Threads"
           threadID={threadInfo.id}
           onClose={popModal}
         />,
       ),
     [popModal, pushModal, threadInfo.id],
   );
   return (
     <a className={classNames(css.thread, css.sidebar)} onClick={onClick}>
-      <a className={css.threadButton}>
+      <div className={css.threadButton}>
         <div
           className={classNames({
             [css.sidebarTitle]: true,
             [css.seeMoreButton]: true,
             [css.unread]: unread,
           })}
         >
           <IoIosMore size="22px" />
           <div className={css.seeMoreText}>See more...</div>
         </div>
-      </a>
+      </div>
     </a>
   );
 }
 
 export default ChatThreadListSeeMoreSidebars;
diff --git a/web/chat/chat-thread-list-sidebar.react.js b/web/chat/chat-thread-list-sidebar.react.js
index b7c23d146..40e1d5ab3 100644
--- a/web/chat/chat-thread-list-sidebar.react.js
+++ b/web/chat/chat-thread-list-sidebar.react.js
@@ -1,53 +1,48 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { SidebarInfo } from 'lib/types/thread-types.js';
 
 import ChatThreadListItemMenu from './chat-thread-list-item-menu.react.js';
 import css from './chat-thread-list.css';
 import SidebarItem from './sidebar-item.react.js';
-import {
-  useOnClickThread,
-  useThreadIsActive,
-} from '../selectors/thread-selectors.js';
+import { useThreadIsActive } from '../selectors/thread-selectors.js';
 
 type Props = {
   +sidebarInfo: SidebarInfo,
   +isSubsequentItem: boolean,
 };
 function ChatThreadListSidebar(props: Props): React.Node {
   const { sidebarInfo, isSubsequentItem } = props;
   const { threadInfo, mostRecentNonLocalMessage } = sidebarInfo;
   const {
     currentUser: { unread },
     id: threadID,
   } = threadInfo;
   const active = useThreadIsActive(threadID);
 
-  const onClick = useOnClickThread(threadInfo);
   let unreadDot;
   if (unread) {
     unreadDot = <div className={css.unreadDot} />;
   }
 
   return (
-    <a
+    <div
       className={classNames(css.threadListSidebar, css.sidebar, {
         [css.activeThread]: active,
       })}
-      onClick={onClick}
     >
       <div className={css.dotContainer}>{unreadDot}</div>
       <SidebarItem sidebarInfo={sidebarInfo} extendArrow={isSubsequentItem} />
       <ChatThreadListItemMenu
         threadInfo={threadInfo}
         mostRecentNonLocalMessage={mostRecentNonLocalMessage}
         renderStyle="thread"
       />
-    </a>
+    </div>
   );
 }
 
 export default ChatThreadListSidebar;
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
index 4adbe9ffc..ea26988f6 100644
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,286 +1,293 @@
 .thread {
   display: flex;
   flex-direction: row;
 }
+
+.sidebarItem {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
 .threadListSidebar {
   display: flex;
   flex-direction: row;
   height: 32px;
   padding-right: 8px;
   position: relative;
   cursor: pointer;
 }
 .threadListSidebar > svg {
   position: absolute;
   top: -7px;
   left: 30px;
 }
 
 .activeThread,
 .threadListSidebar:hover {
   background: var(--thread-active-bg);
 }
 
 .activeThread :is(.title, .lastMessage, .lastMessage *) {
   color: var(--chat-thread-list-color-active);
 }
 
 .activeThread.thread:hover {
   background: var(--thread-active-bg);
 }
 
 .thread:hover {
   background: var(--thread-hover-bg);
 }
 
 div.title {
   flex: 1;
   font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--thread-color-read);
   line-height: var(--line-height-text);
 }
 .threadButton {
   flex: 1;
   cursor: pointer;
   overflow: hidden;
   padding-left: 12px;
 }
 .threadButton + div {
   display: flex;
   flex-direction: column;
 }
 .threadButtonSidebar {
   cursor: pointer;
   overflow: hidden;
   display: flex;
   align-items: center;
   padding-left: 12px;
 }
 p.breadCrumbs {
   display: flex;
   padding: 8px 0 2px 0;
   font-size: var(--xs-font-12);
   font-weight: var(--normal);
   color: var(--breadcrumb-color);
 }
 p.breadCrumbs.unread {
   color: var(--breadcrumb-color-unread);
 }
 span.breadCrumb {
   display: flex;
   align-items: center;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 span.breadCrumb svg {
   margin-left: 4px;
   margin-right: 4px;
 }
 
 div.colorContainer {
   display: flex;
   padding-top: 8px;
 }
 
 div.spacer {
   width: 42px;
   border-radius: 1.68px;
 }
 div.avatarContainer {
   height: 42px;
   display: flex;
 }
 div.lastActivity {
   font-size: var(--xxs-font-10);
   color: var(--fg);
   line-height: 1.5;
   padding-right: 16px;
   font-weight: var(--semi-bold);
   white-space: nowrap;
   flex-grow: 1;
   padding-bottom: 12px;
   align-items: flex-end;
   display: flex;
 }
 
 div.lastMessage {
   font-size: var(--s-font-14);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: var(--line-height-text);
   padding-bottom: 8px;
 }
 div.unread {
   color: var(--fg);
   font-weight: var(--semi-bold);
 }
 div.dark {
   color: var(--thread-color-read);
   padding-right: 16px;
 }
 .messagePreviewPrimary {
   color: var(--thread-color-read);
 }
 .messagePreviewSecondary {
   color: var(--thread-preview-secondary);
 }
 div.dotContainer {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 16px;
 }
 div.unreadDot {
   height: 4px;
   width: 4px;
   background: var(--fg);
   border-radius: 15px;
   align-self: center;
 }
 div.italic {
   font-style: italic;
 }
 div.sidebarTitle {
   flex: 1;
   font-size: var(--s-font-14);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--thread-color-read);
   align-self: flex-start;
 }
 .threadListSidebar > div.dotContainer {
   width: 16px;
 }
 div.sidebarTitle.unread {
   color: var(--fg);
 }
 div.seeMoreButton {
   display: flex;
   align-items: center;
   padding-left: 22px;
 }
 div.seeMoreText {
   padding-left: 14px;
 }
 div.sidebarLastActivity {
   white-space: nowrap;
   font-size: var(--xxs-font-10);
   line-height: var(--line-height-text);
   font-weight: var(--semi-bold);
 }
 svg.sidebarIcon {
   color: var(--thread-color-read);
   padding: 0 6px;
   font-size: 20px;
 }
 div.sidebar .menu > button svg {
   font-size: 16px;
   color: var(--thread-color-read);
 }
 div.sidebar .menu {
   opacity: 0;
 }
 div.sidebar:hover .menu {
   display: flex;
   align-self: flex-end;
   opacity: 1;
 }
 .menu {
   position: relative;
   display: flex;
   justify-content: flex-end;
 }
 .menu > button {
   background-color: transparent;
   color: var(--thread-color-read);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
 .menu > button:focus {
   outline: none;
 }
 
 .menuContent {
   display: none;
   position: absolute;
   top: calc(100% + 1px);
   right: 0;
   z-index: 1;
   width: max-content;
   overflow: hidden;
   background-color: #eeeeee;
   border-radius: 5px;
   box-shadow: 1px 1px 5px 2px #00000022;
 }
 .menuContentVisible {
   display: block;
 }
 
 button.menuContent {
   border: none;
   cursor: pointer;
   padding: 10px;
   font-size: 16px;
 }
 button.menuContent:hover {
   background-color: #dddddd;
 }
 
 ul.list {
   margin: 5px 3px 10px 0;
   overflow: auto;
 }
 
 div.spacer {
   height: 6px;
 }
 
 div.emptyItemContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 div.emptyItemText {
   padding: 16px;
   font-size: 16px;
   text-align: center;
   white-space: pre-wrap;
   color: var(--fg);
 }
 
 div.threadListContainer {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   flex: 1;
 }
 
 div.createNewThread {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   padding: 8px;
 }
 img.longArrow {
   height: 40px;
   width: 25px;
   position: absolute;
   left: 28.5px;
   top: -18px;
 }
 
 img.arrow {
   position: absolute;
   left: 28px;
   top: -10px;
 }
diff --git a/web/chat/sidebar-item.react.js b/web/chat/sidebar-item.react.js
index 621e5aa62..851aa8b0c 100644
--- a/web/chat/sidebar-item.react.js
+++ b/web/chat/sidebar-item.react.js
@@ -1,56 +1,56 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { SidebarInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './chat-thread-list.css';
 import { useOnClickThread } from '../selectors/thread-selectors.js';
 
 type Props = {
   +sidebarInfo: SidebarInfo,
   +extendArrow?: boolean,
 };
 function SidebarItem(props: Props): React.Node {
   const {
     sidebarInfo: { threadInfo },
     extendArrow = false,
   } = props;
   const {
     currentUser: { unread },
   } = threadInfo;
 
   const onClick = useOnClickThread(threadInfo);
 
   const unreadCls = classNames(css.sidebarTitle, { [css.unread]: unread });
   let arrow;
   if (extendArrow) {
     arrow = (
       <img
         className={css.longArrow}
         src="images/long_arrow.svg"
         alt="thread arrow"
       />
     );
   } else {
     arrow = (
       <img src="images/arrow.svg" className={css.arrow} alt="thread arrow" />
     );
   }
   const { uiName } = useResolvedThreadInfo(threadInfo);
   return (
-    <>
+    <a className={css.sidebarItem} onClick={onClick}>
       {arrow}
       <div className={css.spacer} />
-      <a className={css.threadButtonSidebar} onClick={onClick}>
+      <div className={css.threadButtonSidebar}>
         <div className={css.threadRow}>
           <div className={unreadCls}>{uiName}</div>
         </div>
-      </a>
-    </>
+      </div>
+    </a>
   );
 }
 
 export default SidebarItem;