1 files changed, 6 insertions, 6 deletions
diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx
index 4b494264e..f09d063a1 100644
--- a/src/view/com/util/forms/SelectableBtn.tsx
+++ b/src/view/com/util/forms/SelectableBtn.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native'
 import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 interface SelectableBtnProps {
   testID?: string
@@ -28,12 +28,16 @@ export function SelectableBtn({
   const pal = usePalette('default')
   const palPrimary = usePalette('inverted')
   const needsWidthStyles = !style || !('width' in style || 'flex' in style)
+  const {isMobile} = useWebMediaQueries()
   return (
     <Pressable
       testID={testID}
       style={[
         styles.btn,
-        needsWidthStyles && styles.btnWidth,
+        needsWidthStyles && {
+          flex: isMobile ? 1 : undefined,
+          width: !isMobile ? 100 : undefined,
+        },
         left && styles.btnLeft,
         right && styles.btnRight,
         pal.border,
@@ -58,10 +62,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 10,
   },
-  btnWidth: {
-    flex: isDesktopWeb ? undefined : 1,
-    width: isDesktopWeb ? 100 : undefined,
-  },
   btnLeft: {
     borderTopLeftRadius: 8,
     borderBottomLeftRadius: 8,