Merge pull request #4222 from tloncorp/po/tlon-3270-fix-counts-occlud…

…ed-by-overflow-button desktop: fix issue with ListItem counts getting occluded by the overflow buttons
tloncorp · Nov 25, 2024 · ce6b79e · ce6b79e
2 parents 913724d + 687a9f8
commit ce6b79e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/packages/ui/src/components/ListItem/ChannelListItem.tsx b/packages/ui/src/components/ListItem/ChannelListItem.tsx
@@ -3,6 +3,7 @@ import * as logic from '@tloncorp/shared/logic';
 import { useMemo } from 'react';
 import { View } from 'tamagui';
 import { isWeb } from 'tamagui';
+import { getVariableValue } from 'tamagui';
 
 import * as utils from '../../utils';
 import { capitalize } from '../../utils';
@@ -101,6 +102,9 @@ export function ChannelListItem({
                 <ListItem.Count
                   count={unreadCount}
                   muted={logic.isMuted(model.volumeSettings?.level, 'channel')}
+                  marginRight={
+                    isWeb ? getVariableValue('3xl', 'space') : 'unset'
+                  }
                 />
               )}
             </ListItem.EndContent>
@@ -109,7 +113,13 @@ export function ChannelListItem({
       </Pressable>
       {isWeb && (
         <View position="absolute" right={-2} top={44} zIndex={1}>
-          <Button onPress={handleLongPress} borderWidth="unset" size="$l">
+          <Button
+            onPress={handleLongPress}
+            borderWidth="unset"
+            size="$s"
+            paddingHorizontal={0}
+            marginHorizontal="$-m"
+          >
             <Icon type="Overflow" />
           </Button>
         </View>

diff --git a/packages/ui/src/components/ListItem/GroupListItem.tsx b/packages/ui/src/components/ListItem/GroupListItem.tsx
@@ -1,7 +1,6 @@
 import type * as db from '@tloncorp/shared/db';
 import * as logic from '@tloncorp/shared/logic';
-import { View } from 'tamagui';
-import { isWeb } from 'tamagui';
+import { View, isWeb } from 'tamagui';
 
 import { Badge } from '../Badge';
 import { Button } from '../Button';
@@ -69,6 +68,7 @@ export const GroupListItem = ({
                   <ListItem.Count
                     count={unreadCount}
                     muted={logic.isMuted(model.volumeSettings?.level, 'group')}
+                    marginRight={isWeb ? '$l' : 'unset'}
                   />
                 </>
               )}
@@ -78,7 +78,13 @@ export const GroupListItem = ({
       </Pressable>
       {isWeb && !isPending && (
         <View position="absolute" right={-2} top={44} zIndex={1}>
-          <Button onPress={handleLongPress} borderWidth="unset" size="$l">
+          <Button
+            onPress={handleLongPress}
+            borderWidth="unset"
+            size="$s"
+            paddingHorizontal={0}
+            marginHorizontal="$-m"
+          >
             <Icon type="Overflow" />
           </Button>
         </View>