Add notice to labeler card, show all labelers

src/components/LabelingServiceCard/index.tsx

···
 import {useLabelerInfoQuery} from '#/state/queries/labeler'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
···
 }
 
 export function Title({value}: {value: string}) {
-  return <Text style={[a.text_md, a.font_bold]}>{value}</Text>
+  return <Text style={[a.text_md, a.font_bold, a.leading_tight]}>{value}</Text>
 }
 
 export function Description({value, handle}: {value?: string; handle: string}) {
   return value ? (
     <Text numberOfLines={2}>
-      <RichText value={value} style={[]} />
+      <RichText value={value} style={[a.leading_snug]} />
     </Text>
   ) : (
-    <Text>
+    <Text style={[a.leading_snug]}>
       <Trans>By {sanitizeHandle(handle, '@')}</Trans>
     </Text>
   )
 }
 
+export function RegionalNotice() {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.gap_xs,
+        a.pt_2xs,
+        {marginLeft: -2},
+      ]}>
+      <Flag fill={t.atoms.text_contrast_low.color} size="sm" />
+      <Text style={[a.italic, a.leading_snug]}>
+        <Trans>Required in your region</Trans>
+      </Text>
+    </View>
+  )
+}
+
 export function LikeCount({count}: {count: number}) {
   const t = useTheme()
   return (
···
         a.align_center,
         a.justify_between,
       ]}>
-      <View style={[a.gap_xs, a.flex_1]}>{children}</View>
+      <View style={[a.gap_2xs, a.flex_1]}>{children}</View>
 
       <ChevronRight size="md" style={[a.z_10, t.atoms.text_contrast_low]} />
     </View>

src/screens/Moderation/index.tsx

···
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
-import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
 import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
 import * as LabelingService from '#/components/LabelingServiceCard'
···
         </View>
       ) : (
         <View style={[a.rounded_sm, t.atoms.bg_contrast_25]}>
-          {labelers
-            .filter(
-              labeler =>
-                !isNonConfigurableModerationAuthority(labeler.creator.did),
+          {labelers.map((labeler, i) => {
+            return (
+              <React.Fragment key={labeler.creator.did}>
+                {i !== 0 && <Divider />}
+                <LabelingService.Link labeler={labeler}>
+                  {state => (
+                    <LabelingService.Outer
+                      style={[
+                        i === 0 && {
+                          borderTopLeftRadius: a.rounded_sm.borderRadius,
+                          borderTopRightRadius: a.rounded_sm.borderRadius,
+                        },
+                        i === labelers.length - 1 && {
+                          borderBottomLeftRadius: a.rounded_sm.borderRadius,
+                          borderBottomRightRadius: a.rounded_sm.borderRadius,
+                        },
+                        (state.hovered || state.pressed) && [
+                          t.atoms.bg_contrast_50,
+                        ],
+                      ]}>
+                      <LabelingService.Avatar avatar={labeler.creator.avatar} />
+                      <LabelingService.Content>
+                        <LabelingService.Title
+                          value={getLabelingServiceTitle({
+                            displayName: labeler.creator.displayName,
+                            handle: labeler.creator.handle,
+                          })}
+                        />
+                        <LabelingService.Description
+                          value={labeler.creator.description}
+                          handle={labeler.creator.handle}
+                        />
+                        {isNonConfigurableModerationAuthority(
+                          labeler.creator.did,
+                        ) && <LabelingService.RegionalNotice />}
+                      </LabelingService.Content>
+                    </LabelingService.Outer>
+                  )}
+                </LabelingService.Link>
+              </React.Fragment>
             )
-            .map((labeler, i) => {
-              return (
-                <React.Fragment key={labeler.creator.did}>
-                  {i !== 0 && <Divider />}
-                  <LabelingService.Link labeler={labeler}>
-                    {state => (
-                      <LabelingService.Outer
-                        style={[
-                          i === 0 && {
-                            borderTopLeftRadius: a.rounded_sm.borderRadius,
-                            borderTopRightRadius: a.rounded_sm.borderRadius,
-                          },
-                          i === labelers.length - 1 && {
-                            borderBottomLeftRadius: a.rounded_sm.borderRadius,
-                            borderBottomRightRadius: a.rounded_sm.borderRadius,
-                          },
-                          (state.hovered || state.pressed) && [
-                            t.atoms.bg_contrast_50,
-                          ],
-                        ]}>
-                        <LabelingService.Avatar
-                          avatar={labeler.creator.avatar}
-                        />
-                        <LabelingService.Content>
-                          <LabelingService.Title
-                            value={getLabelingServiceTitle({
-                              displayName: labeler.creator.displayName,
-                              handle: labeler.creator.handle,
-                            })}
-                          />
-                          <LabelingService.Description
-                            value={labeler.creator.description}
-                            handle={labeler.creator.handle}
-                          />
-                        </LabelingService.Content>
-                      </LabelingService.Outer>
-                    )}
-                  </LabelingService.Link>
-                </React.Fragment>
-              )
-            })}
+          })}
         </View>
       )}
-
-      {labelers?.some(
-        labeler => !isNonConfigurableModerationAuthority(labeler.creator.did),
-      ) && (
-        <View
-          style={[
-            a.p_lg,
-            a.mb_md,
-            a.flex_row,
-            a.align_center,
-            a.justify_center,
-            a.gap_sm,
-          ]}>
-          <Flag fill={t.atoms.text_contrast_low.color} size="sm" />
-          <Text style={[a.italic]}>
-            <Trans>Additional moderation may apply in your region.</Trans>
-          </Text>
-        </View>
-      )}
-
-      <Divider />
 
       <Text
         style={[