mobile: fix reminder visual issues

apps/mobile/app/components/list-items/reminder/index.tsx

@@ -81,7 +81,8 @@ const ReminderItem = React.memo(
           <View
             style={{
               flexDirection: "row",
-              flexWrap: "wrap"
+              flexWrap: "wrap",
+              marginTop: 5
             }}
           >
             {item.disabled ? (
@@ -149,10 +150,8 @@ const ReminderItem = React.memo(
               fontSize={SIZE.xs}
               style={{
                 justifyContent: "flex-start",
-                borderWidth: 0,
-                height: 30,
-                alignSelf: "flex-start",
-                marginTop: 5
+                height: 25,
+                alignSelf: "flex-start"
               }}
             />
           </View>

apps/mobile/app/components/list-items/selection-wrapper/index.tsx

@@ -70,6 +70,7 @@ const SelectionWrapper = ({
   }
 
   const onLongPress = () => {
+    if (isSheet) return;
     if (useSelectionStore.getState().selectionMode !== item.type) {
       useSelectionStore.getState().setSelectionMode(item.type);
     }
@@ -78,7 +79,7 @@ const SelectionWrapper = ({
 
   return (
     <Pressable
-      customColor={isSheet ? colors.primary.hover : "transparent"}
+      customColor={isSheet ? colors.secondary.background : "transparent"}
       testID={testID}
       onLongPress={onLongPress}
       onPress={onPress}

apps/mobile/app/components/sheets/relations-list/index.tsx

@@ -88,14 +88,14 @@ export const RelationsList = ({
         sortDirection: "desc"
       })
       .then((grouped) => {
-        setItems(grouped);
+        setTimeout(() => {
+          setItems(grouped);
+        }, 300);
       });
-  }, [relationType, referenceType, item?.id, item?.type]);
+  }, [relationType, referenceType, item?.id, item?.type, updater]);
 
   return (
-    <View
-      style={{ paddingHorizontal: 12, height: hasNoRelations ? 300 : "100%" }}
-    >
+    <View style={{ paddingHorizontal: 12, height: "100%" }}>
       <SheetProvider context="local" />
       <DialogHeader
         title={title}

apps/mobile/app/components/sheets/reminder/index.tsx

@@ -124,9 +124,11 @@ export default function ReminderSheet({
   const referencedItem = reference ? (reference as Note) : null;
 
   const title = useRef<string | undefined>(
-    reminder?.title || referencedItem?.title
+    !reminder ? referencedItem?.title : reminder?.title
+  );
+  const details = useRef<string | undefined>(
+    !reminder ? referencedItem?.headline : reminder?.description
   );
-  const details = useRef<string | undefined>(reminder?.description);
   const titleRef = useRef<TextInput>(null);
   const timer = useRef<NodeJS.Timeout>();
 
@@ -543,7 +545,7 @@ export default function ReminderSheet({
         />
 
         {reminderMode === ReminderModes.Permanent ? null : (
-          <ScrollView
+          <RNScrollView
             style={{
               flexDirection: "row",
               marginTop: 12,
@@ -588,7 +590,7 @@ export default function ReminderSheet({
                 }}
               />
             ))}
-          </ScrollView>
+          </RNScrollView>
         )}
       </ScrollView>
 

apps/mobile/app/components/ui/reminder-time/index.tsx

@@ -51,7 +51,6 @@ export const ReminderTime = ({
     <Button
       title={time}
       key={reminder.id}
-      height={20}
       icon="bell"
       fontSize={SIZE.xs}
       iconSize={SIZE.sm}
@@ -67,12 +66,10 @@ export const ReminderTime = ({
         marginRight: 0
       }}
       style={{
+        height: "auto",
         borderRadius: 5,
-        marginRight: 5,
-        borderWidth: 0.5,
         borderColor: colors.primary.border,
         paddingHorizontal: 6,
-        marginBottom: 5,
         ...(style as ViewStyle)
       }}
       {...props}