diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js
index fa1b98a7..87560918 100644
--- a/net/web/src/context/useConversationContext.hook.js
+++ b/net/web/src/context/useConversationContext.hook.js
@@ -221,9 +221,6 @@ export function useConversationContext() {
     catch (err) {
       console.log(err);
       updateState({ error: true });
-      if (ev.type === EVENT_RESYNC) {
-        window.alert("failed to syncrhonize conversation");
-      }
     }
   }
 
diff --git a/net/web/src/session/cards/cardItem/CardItem.jsx b/net/web/src/session/cards/cardItem/CardItem.jsx
index 07656f8f..8d011b98 100644
--- a/net/web/src/session/cards/cardItem/CardItem.jsx
+++ b/net/web/src/session/cards/cardItem/CardItem.jsx
@@ -33,7 +33,12 @@ export function CardItem({ item, open }) {
         <div class="handle">{ handle() }</div>
       </div>
       <div class="markup">
-        { !state.resync && item.error && (
+        { !state.resync && item.error && state.display === 'small' && (
+          <StatusError onClick={resync}>
+            <ExclamationCircleOutlined />
+          </StatusError>
+        )}
+        { !state.resync && item.error && state.display !== 'small' && (
           <Tooltip placement="left" title="sync error">
             <StatusError onClick={resync}>
               <ExclamationCircleOutlined />
diff --git a/net/web/src/session/cards/cardItem/useCardItem.hook.js b/net/web/src/session/cards/cardItem/useCardItem.hook.js
index 2cbbbe04..83a4fc57 100644
--- a/net/web/src/session/cards/cardItem/useCardItem.hook.js
+++ b/net/web/src/session/cards/cardItem/useCardItem.hook.js
@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
+import { ViewportContext } from 'context/ViewportContext';
 
 export function useCardItem(item) {
 
@@ -9,6 +10,7 @@ export function useCardItem(item) {
   });
 
   const card = useContext(CardContext);
+  const viewport = useContext(ViewportContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -18,6 +20,10 @@ export function useCardItem(item) {
     updateState({ logo: card.actions.getImageUrl(item.id) });
   }, [card, item]); 
 
+  useEffect(() => {
+    updateState({ display: viewport.state.display });
+  }, [viewport]);
+
   const actions = {
     resync: async () => {
       if (!state.resync) {
diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx
index ca7c5f0a..5b8efdd4 100644
--- a/net/web/src/session/conversation/Conversation.jsx
+++ b/net/web/src/session/conversation/Conversation.jsx
@@ -23,7 +23,12 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
             <Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
           </div>
           <div class="label">{ state.subject }</div>
-          { state.error && (
+          { state.error && state.display === 'small' && (
+            <StatusError onClick={actions.resync}>
+              <ExclamationCircleOutlined />
+            </StatusError>
+          )}
+          { state.error && state.display !== 'small' && (
             <Tooltip placement="bottom" title="sync error">
               <StatusError onClick={actions.resync}>
                 <ExclamationCircleOutlined />
@@ -72,13 +77,22 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
         <AddTopic cardId={cardId} channelId={channelId} />
         { state.uploadError && (
           <div class="upload-error">
-            <Tooltip placement="bottom" title="upload error">
+            { state.display === 'small' && (
               <StatusError>
                 <div onClick={() => actions.clearUploadErrors(cardId, channelId)}>
                   <ExclamationCircleOutlined />
                 </div>
               </StatusError>
-            </Tooltip>
+            )}
+            { state.display !== 'small' && (
+              <Tooltip placement="bottom" title="upload error">
+                <StatusError>
+                  <div onClick={() => actions.clearUploadErrors(cardId, channelId)}>
+                    <ExclamationCircleOutlined />
+                  </div>
+                </StatusError>
+              </Tooltip>
+            )}
           </div>
         )}
       </div>