From e53911e844017d3d5e4150fd6f76423f2b87c278 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Thu, 7 May 2026 20:45:00 +0200
Subject: [PATCH] fix(social/compose): Bild-Upload + Teilen-Button auf
 Apple-HIG 44pt Tap-Target

Vorher: 30/32pt Touch-Areas mit hitSlop-Kruecken (asymmetrisch, schwer zu treffen).
Nachher: explizite height: 44 im style-Callback, Icons 22pt, Padding angepasst.

Konsistent mit PostCard-Like/Comment-Pattern. Funktionalitaet (pickImage,
submit) unveraendert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/rebreak-native/components/ComposeCard.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/apps/rebreak-native/components/ComposeCard.tsx b/apps/rebreak-native/components/ComposeCard.tsx
index c31b651..1d63b08 100644
--- a/apps/rebreak-native/components/ComposeCard.tsx
+++ b/apps/rebreak-native/components/ComposeCard.tsx
@@ -126,7 +126,6 @@ export function ComposeCard({ onPosted }: Props) {
                 style={{ height: 160 }}
                 resizeMode="cover"
               />
-              {/* HitSlop +9pt rundum → 28pt visual + 18pt slop ≈ 46pt effektive Tap-Area (HIG ≥44pt). */}
               <Pressable
                 onPress={() => setImageUri(null)}
                 hitSlop={{ top: 9, bottom: 9, left: 9, right: 9 }}
@@ -143,20 +142,17 @@ export function ComposeCard({ onPosted }: Props) {
 
       {showActions && (
         <View className="flex-row items-center justify-between mt-3 pt-3 border-t border-neutral-100">
-          {/* Image-Picker: visuell klein (icon 18pt + label), aber hitSlop +12 → effektive Tap-Area ~46pt (HIG-Min 44pt). */}
           <Pressable
             onPress={pickImage}
-            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
             android_ripple={{ color: 'rgba(0,0,0,0.08)', borderless: true, radius: 22 }}
-            className="flex-row items-center gap-1.5 py-1.5 pr-1.5"
-            style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
+            className="flex-row items-center gap-1.5 px-2"
+            style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1, height: 44, alignItems: 'center', justifyContent: 'center' })}
           >
-            <Ionicons name="image-outline" size={18} color="#737373" />
+            <Ionicons name="image-outline" size={22} color="#737373" />
             <Text className="text-sm text-neutral-500" style={{ fontFamily: 'Nunito_400Regular' }}>{t('community.image')}</Text>
           </Pressable>
 
           <View className="flex-row items-center gap-2">
-            {/* Cancel-Label: hitSlop sichert ≥44pt Tap-Area trotz nackter Text-Höhe. */}
             <Pressable
               onPress={cancel}
               hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
@@ -164,13 +160,12 @@ export function ComposeCard({ onPosted }: Props) {
             >
               <Text className="text-sm text-neutral-400" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('common.cancel')}</Text>
             </Pressable>
-            {/* Share-Pill: visuell h-8 (32pt) bleibt erhalten — hitSlop +6 vertikal hebt Tap-Area auf 44pt. */}
             <Pressable
               onPress={submit}
               disabled={!content.trim() || posting}
-              hitSlop={{ top: 6, bottom: 6, left: 8, right: 8 }}
-              className="h-8 px-4 rounded-full bg-rebreak-500 items-center justify-center flex-row gap-1.5"
+              className="px-5 rounded-full bg-rebreak-500 items-center justify-center flex-row gap-1.5"
               style={({ pressed }) => ({
+                height: 44,
                 opacity: pressed || !content.trim() || posting ? 0.5 : 1,
               })}
             >