Fix space on bottom of mod screen (#3266)

* Fix space on bottom of mod screen

* fix PWI label overflow + center loader (#3268)

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 225 insertions, 226 deletions

diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx
index d0bfaeade..50e5ee3b9 100644
--- a/src/screens/Moderation/index.tsx
+++ b/src/screens/Moderation/index.tsx
@@ -205,19 +205,111 @@ export function ModerationScreenInner({
   )
 
   return (
-    <View>
-      <ScrollView
-        contentContainerStyle={[
-          a.border_0,
+    <ScrollView
+      contentContainerStyle={[
+        a.border_0,
+        a.pt_2xl,
+        a.px_lg,
+        gtMobile && a.px_2xl,
+      ]}>
+      <Text
+        style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}>
+        <Trans>Moderation tools</Trans>
+      </Text>
+
+      <View
+        style={[
+          a.w_full,
+          a.rounded_md,
+          a.overflow_hidden,
+          t.atoms.bg_contrast_25,
+        ]}>
+        <Button
+          testID="mutedWordsBtn"
+          label={_(msg`Open muted words and tags settings`)}
+          onPress={() => mutedWordsDialogControl.open()}>
+          {state => (
+            <SubItem
+              title={_(msg`Muted words & tags`)}
+              icon={Filter}
+              style={[
+                (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
+              ]}
+            />
+          )}
+        </Button>
+        <Divider />
+        <Link testID="moderationlistsBtn" to="/moderation/modlists">
+          {state => (
+            <SubItem
+              title={_(msg`Moderation lists`)}
+              icon={Group}
+              style={[
+                (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
+              ]}
+            />
+          )}
+        </Link>
+        <Divider />
+        <Link testID="mutedAccountsBtn" to="/moderation/muted-accounts">
+          {state => (
+            <SubItem
+              title={_(msg`Muted accounts`)}
+              icon={Person}
+              style={[
+                (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
+              ]}
+            />
+          )}
+        </Link>
+        <Divider />
+        <Link testID="blockedAccountsBtn" to="/moderation/blocked-accounts">
+          {state => (
+            <SubItem
+              title={_(msg`Blocked accounts`)}
+              icon={CircleBanSign}
+              style={[
+                (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
+              ]}
+            />
+          )}
+        </Link>
+      </View>
+
+      <Text
+        style={[
           a.pt_2xl,
-          a.px_lg,
-          gtMobile && a.px_2xl,
+          a.pb_md,
+          a.text_md,
+          a.font_bold,
+          t.atoms.text_contrast_high,
         ]}>
-        <Text
-          style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}>
-          <Trans>Moderation tools</Trans>
-        </Text>
+        <Trans>Content filters</Trans>
+      </Text>
 
+      <View style={[a.gap_md]}>
+        {ageNotSet && (
+          <>
+            <Button
+              label={_(msg`Confirm your birthdate`)}
+              size="small"
+              variant="solid"
+              color="secondary"
+              onPress={() => {
+                birthdateDialogControl.open()
+              }}
+              style={[a.justify_between, a.rounded_md, a.px_lg, a.py_lg]}>
+              <ButtonText>
+                <Trans>Confirm your age:</Trans>
+              </ButtonText>
+              <ButtonText>
+                <Trans>Set birthdate</Trans>
+              </ButtonText>
+            </Button>
+
+            <BirthDateSettingsDialog control={birthdateDialogControl} />
+          </>
+        )}
         <View
           style={[
             a.w_full,
@@ -225,231 +317,137 @@ export function ModerationScreenInner({
             a.overflow_hidden,
             t.atoms.bg_contrast_25,
           ]}>
-          <Button
-            testID="mutedWordsBtn"
-            label={_(msg`Open muted words and tags settings`)}
-            onPress={() => mutedWordsDialogControl.open()}>
-            {state => (
-              <SubItem
-                title={_(msg`Muted words & tags`)}
-                icon={Filter}
-                style={[
-                  (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
-                ]}
-              />
-            )}
-          </Button>
-          <Divider />
-          <Link testID="moderationlistsBtn" to="/moderation/modlists">
-            {state => (
-              <SubItem
-                title={_(msg`Moderation lists`)}
-                icon={Group}
-                style={[
-                  (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
-                ]}
-              />
-            )}
-          </Link>
-          <Divider />
-          <Link testID="mutedAccountsBtn" to="/moderation/muted-accounts">
-            {state => (
-              <SubItem
-                title={_(msg`Muted accounts`)}
-                icon={Person}
-                style={[
-                  (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
-                ]}
-              />
-            )}
-          </Link>
-          <Divider />
-          <Link testID="blockedAccountsBtn" to="/moderation/blocked-accounts">
-            {state => (
-              <SubItem
-                title={_(msg`Blocked accounts`)}
-                icon={CircleBanSign}
+          {!ageNotSet && !isUnderage && (
+            <>
+              <View
                 style={[
-                  (state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
-                ]}
-              />
-            )}
-          </Link>
-        </View>
-
-        <Text
-          style={[
-            a.pt_2xl,
-            a.pb_md,
-            a.text_md,
-            a.font_bold,
-            t.atoms.text_contrast_high,
-          ]}>
-          <Trans>Content filters</Trans>
-        </Text>
-
-        <View style={[a.gap_md]}>
-          {ageNotSet && (
+                  a.py_lg,
+                  a.px_lg,
+                  a.flex_row,
+                  a.align_center,
+                  a.justify_between,
+                ]}>
+                <Text style={[a.font_semibold, t.atoms.text_contrast_high]}>
+                  <Trans>Enable adult content</Trans>
+                </Text>
+                <Toggle.Item
+                  label={_(msg`Toggle to enable or disable adult content`)}
+                  name="adultContent"
+                  value={adultContentEnabled}
+                  onChange={onToggleAdultContentEnabled}>
+                  <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                    <Text style={[t.atoms.text_contrast_medium]}>
+                      {adultContentEnabled ? (
+                        <Trans>Enabled</Trans>
+                      ) : (
+                        <Trans>Disabled</Trans>
+                      )}
+                    </Text>
+                    <Toggle.Switch />
+                  </View>
+                </Toggle.Item>
+              </View>
+              <Divider />
+            </>
+          )}
+          {!isUnderage && adultContentEnabled && (
             <>
-              <Button
-                label={_(msg`Confirm your birthdate`)}
-                size="small"
-                variant="solid"
-                color="secondary"
-                onPress={() => {
-                  birthdateDialogControl.open()
-                }}
-                style={[a.justify_between, a.rounded_md, a.px_lg, a.py_lg]}>
-                <ButtonText>
-                  <Trans>Confirm your age:</Trans>
-                </ButtonText>
-                <ButtonText>
-                  <Trans>Set birthdate</Trans>
-                </ButtonText>
-              </Button>
-
-              <BirthDateSettingsDialog control={birthdateDialogControl} />
+              <GlobalModerationLabelPref labelValueDefinition={LABELS.porn} />
+              <Divider />
+              <GlobalModerationLabelPref labelValueDefinition={LABELS.sexual} />
+              <Divider />
+              <GlobalModerationLabelPref
+                labelValueDefinition={LABELS['graphic-media']}
+              />
+              <Divider />
             </>
           )}
-          <View
-            style={[
-              a.w_full,
-              a.rounded_md,
-              a.overflow_hidden,
-              t.atoms.bg_contrast_25,
-            ]}>
-            {!ageNotSet && !isUnderage && (
-              <>
-                <View
-                  style={[
-                    a.py_lg,
-                    a.px_lg,
-                    a.flex_row,
-                    a.align_center,
-                    a.justify_between,
-                  ]}>
-                  <Text style={[a.font_semibold, t.atoms.text_contrast_high]}>
-                    <Trans>Enable adult content</Trans>
-                  </Text>
-                  <Toggle.Item
-                    label={_(msg`Toggle to enable or disable adult content`)}
-                    name="adultContent"
-                    value={adultContentEnabled}
-                    onChange={onToggleAdultContentEnabled}>
-                    <View style={[a.flex_row, a.align_center, a.gap_sm]}>
-                      <Text style={[t.atoms.text_contrast_medium]}>
-                        {adultContentEnabled ? (
-                          <Trans>Enabled</Trans>
-                        ) : (
-                          <Trans>Disabled</Trans>
-                        )}
-                      </Text>
-                      <Toggle.Switch />
-                    </View>
-                  </Toggle.Item>
-                </View>
-                <Divider />
-              </>
-            )}
-            {!isUnderage && adultContentEnabled && (
-              <>
-                <GlobalModerationLabelPref labelValueDefinition={LABELS.porn} />
-                <Divider />
-                <GlobalModerationLabelPref
-                  labelValueDefinition={LABELS.sexual}
-                />
-                <Divider />
-                <GlobalModerationLabelPref
-                  labelValueDefinition={LABELS['graphic-media']}
-                />
-                <Divider />
-              </>
-            )}
-            <GlobalModerationLabelPref labelValueDefinition={LABELS.nudity} />
-          </View>
+          <GlobalModerationLabelPref labelValueDefinition={LABELS.nudity} />
         </View>
+      </View>
 
-        <Text
-          style={[
-            a.text_md,
-            a.font_bold,
-            a.pt_2xl,
-            a.pb_md,
-            t.atoms.text_contrast_high,
-          ]}>
-          <Trans>Advanced</Trans>
-        </Text>
+      <Text
+        style={[
+          a.text_md,
+          a.font_bold,
+          a.pt_2xl,
+          a.pb_md,
+          t.atoms.text_contrast_high,
+        ]}>
+        <Trans>Advanced</Trans>
+      </Text>
 
-        {isLabelersLoading ? (
-          <Loader />
-        ) : labelersError || !labelers ? (
-          <View style={[a.p_lg, a.rounded_sm, t.atoms.bg_contrast_25]}>
-            <Text>
-              <Trans>
-                We were unable to load your configured labelers at this time.
-              </Trans>
-            </Text>
-          </View>
-        ) : (
-          <View style={[a.rounded_sm, t.atoms.bg_contrast_25]}>
-            {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 />
-                        <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>
-        )}
+      {isLabelersLoading ? (
+        <View style={[a.w_full, a.align_center, a.p_lg]}>
+          <Loader size="xl" />
+        </View>
+      ) : labelersError || !labelers ? (
+        <View style={[a.p_lg, a.rounded_sm, t.atoms.bg_contrast_25]}>
+          <Text>
+            <Trans>
+              We were unable to load your configured labelers at this time.
+            </Trans>
+          </Text>
+        </View>
+      ) : (
+        <View style={[a.rounded_sm, t.atoms.bg_contrast_25]}>
+          {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 />
+                      <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>
+      )}
 
-        <Text
-          style={[
-            a.text_md,
-            a.font_bold,
-            a.pt_2xl,
-            a.pb_md,
-            t.atoms.text_contrast_high,
-          ]}>
-          <Trans>Logged-out visibility</Trans>
-        </Text>
+      <Text
+        style={[
+          a.text_md,
+          a.font_bold,
+          a.pt_2xl,
+          a.pb_md,
+          t.atoms.text_contrast_high,
+        ]}>
+        <Trans>Logged-out visibility</Trans>
+      </Text>
 
-        <PwiOptOut />
+      <PwiOptOut />
 
-        <View style={{height: 200}} />
-      </ScrollView>
-    </View>
+      <View style={{height: 200}} />
+    </ScrollView>
   )
 }
 
@@ -517,11 +515,12 @@ function PwiOptOut() {
           value={isOptedOut}
           onChange={onToggleOptOut}
           name="logged_out_visibility"
+          style={a.flex_1}
           label={_(
             msg`Discourage apps from showing my account to logged-out users`,
           )}>
           <Toggle.Switch />
-          <Toggle.Label style={[a.text_md]}>
+          <Toggle.Label style={[a.text_md, a.flex_1]}>
             <Trans>
               Discourage apps from showing my account to logged-out users
             </Trans>