fix(mobile): Îndrăzneț fidel — Evenimente și pagina evenimentului, fără text tăiat

mobile/src/components/events/EventCard.tsx

@@ -135,40 +135,24 @@ export const EventCard = ({
       >
         <DateBlock date={event.startDate} tone={enrolled ? 'yellow' : 'navy'} />
         <View style={styles.body}>
-          <AppText variant="headline" numberOfLines={2}>
-            {event.name}
-          </AppText>
-          <View style={styles.meta}>
+          {/* nothing is cut: long names and dates wrap (Dynamic Type up to 1.35×) */}
+          <AppText variant="headline">{event.name}</AppText>
+          <View style={[styles.meta, styles.firstMeta]}>
             <ClockIcon size={14} color={palette.ink2} />
-            <AppText
-              variant="caption"
-              color={palette.ink2}
-              numberOfLines={2}
-              style={styles.metaText}
-            >
+            <AppText variant="caption" color={palette.ink2} style={styles.metaText}>
               {when}
             </AppText>
           </View>
           {!!event.location && (
             <View style={styles.meta}>
               <PinIcon size={14} color={palette.ink2} />
-              <AppText
-                variant="caption"
-                color={palette.ink2}
-                numberOfLines={2}
-                style={styles.metaText}
-              >
+              <AppText variant="caption" color={palette.ink2} style={styles.metaText}>
                 {event.location}
               </AppText>
             </View>
           )}
           {!!event.organizationName && (
-            <AppText
-              variant="caption"
-              color={palette.ink2}
-              numberOfLines={2}
-              style={styles.metaText}
-            >
+            <AppText variant="caption" color={palette.ink2}>
               {event.organizationName}
             </AppText>
           )}
@@ -207,33 +191,38 @@ const styles = StyleSheet.create((theme) => ({
   // inside the legacy Group, which pads the sides
   row: { paddingVertical: 12 },
   divider: { borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: theme.colors.line },
+  // no fixed height: it stretches with the card and grows with its own text (capped at 1.15×)
   dateBlock: {
     width: 60,
-    minHeight: 84,
     borderRadius: 18,
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: 8,
   },
-  dateBlockHero: { width: 76, minHeight: 100, borderRadius: 20, paddingVertical: 10 },
+  dateBlockHero: { width: 76, paddingVertical: 10 },
   dateSmall: {
     fontFamily: theme.fontFamily.textHeavy,
     fontSize: 10.5,
-    lineHeight: 13,
-    letterSpacing: 0.7,
+    lineHeight: 14,
+    letterSpacing: 0.74,
+    includeFontPadding: false,
   },
+  // handbook: Bricolage 30, line-height 1 (digits: no accents to clip)
   dateDay: {
     fontFamily: theme.fontFamily.display,
     fontSize: 30,
-    lineHeight: 32,
+    lineHeight: 30,
     letterSpacing: -1.2,
     fontVariant: ['tabular-nums'],
+    includeFontPadding: false,
   },
-  dateDayHero: { fontSize: 40, lineHeight: 42, letterSpacing: -1.6 },
-  body: { flex: 1, gap: 3, paddingVertical: 2 },
+  dateDayHero: { fontSize: 40, lineHeight: 40, letterSpacing: -1.6 },
+  // .et / .em: the first meta line sits 3pt under the title, the others follow without a gap
+  body: { flex: 1, minWidth: 0 },
   meta: { flexDirection: 'row', alignItems: 'center', gap: 5 },
-  metaText: { flexShrink: 1 },
-  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 6 },
+  firstMeta: { marginTop: 3 },
+  metaText: { flex: 1, minWidth: 0 },
+  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 8 },
   // the plain chip on a white card: a hairline so it still reads as a chip
   plainChip: { borderWidth: 1, borderColor: theme.colors.line },
 }));

mobile/src/components/events/EventFiltersSheet.tsx

@@ -118,8 +118,16 @@ export default EventFiltersSheet;
 const styles = StyleSheet.create((theme) => ({
   section: { gap: 10 },
   options: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
-  footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 16 },
+  // at large text sizes the button moves under "Șterge filtrele" instead of squeezing its label
+  footer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    columnGap: 16,
+    rowGap: 12,
+  },
   clear: { textDecorationLine: 'underline', color: theme.colors.ink },
   dim: { opacity: 0.45 },
-  apply: { flexShrink: 1 },
+  apply: { marginLeft: 'auto', maxWidth: '100%' },
 }));

mobile/src/components/events/EventSearchModal.tsx

@@ -99,7 +99,7 @@ const EventSearch = ({
       <AppText variant="caption" color={palette.ink2}>
         {label}
       </AppText>
-      <AppText variant="bodyStrong" numberOfLines={1} style={styles.sheadValue}>
+      <AppText variant="bodyStrong" numberOfLines={2} style={styles.sheadValue}>
         {value}
       </AppText>
     </Pressable>
@@ -283,7 +283,7 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: 20,
     gap: 16,
   },
-  sheadValue: { flexShrink: 1 },
+  sheadValue: { flexShrink: 1, textAlign: 'right' },
   sectionTitle: { paddingTop: 20, paddingHorizontal: 20, paddingBottom: 2 },
   sectionTitleText: { fontSize: 28, lineHeight: 31 },
   sectionBody: { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 16 },
@@ -320,10 +320,12 @@ const styles = StyleSheet.create((theme) => ({
     paddingTop: 12,
     paddingHorizontal: theme.space.gutter,
     flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: 'center',
     justifyContent: 'space-between',
-    gap: 16,
+    columnGap: 16,
+    rowGap: 12,
   },
   clear: { textDecorationLine: 'underline' },
-  apply: { flexShrink: 1 },
+  apply: { marginLeft: 'auto', maxWidth: '100%' },
 }));

mobile/src/design/components/SegmentedControl.tsx

@@ -107,11 +107,13 @@ export function SegmentedControl<T extends string>({
               }
               onChange(option.key);
             }}
-            style={styles.segment}
+            // Dynamic Type: a label of several words wraps to a second line instead of being cut;
+            // one-word labels keep their width, so they never break mid-word
+            style={[styles.segment, option.label.includes(' ') ? null : styles.segmentOneWord]}
           >
             {option.icon?.(selected)}
             <Text
-              numberOfLines={1}
+              numberOfLines={2}
               maxFontSizeMultiplier={fontScaleCap.text}
               style={[styles.label, { color: selected ? palette.navy : LABEL_OFF }]}
             >
@@ -121,7 +123,7 @@ export function SegmentedControl<T extends string>({
               <View style={[styles.count, selected ? styles.countOn : null]}>
                 <Text
                   maxFontSizeMultiplier={fontScaleCap.text}
-                  style={[styles.countText, { color: selected ? palette.yellow : palette.white }]}
+                  style={[styles.countText, { color: selected ? palette.yellow : LABEL_OFF }]}
                 >
                   {option.count}
                 </Text>
@@ -156,17 +158,22 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 1,
     flexBasis: 'auto',
     minHeight: 42,
+    minWidth: 0,
     borderRadius: 17,
     paddingHorizontal: 8,
+    paddingVertical: 3,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     gap: 6,
   },
+  segmentOneWord: { flexShrink: 0 },
   label: {
+    flexShrink: 1,
     fontFamily: theme.fontFamily.textHeavy,
     fontSize: 13.5,
-    lineHeight: 18,
+    lineHeight: 17,
+    textAlign: 'center',
   },
   count: {
     minWidth: 20,