From 2f8e7b265600cf537f385c95cb22647484793b4c Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 12 Dec 2023 13:20:06 -0600
Subject: Make right nav scrollable on short screens (#2186)

---
 src/view/shell/desktop/RightNav.tsx | 123 ++++++++++++++++++------------------
 1 file changed, 63 insertions(+), 60 deletions(-)

(limited to 'src')

diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index c8196c2c4..7e2f85718 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -15,6 +15,7 @@ import {useLingui} from '@lingui/react'
 import {Plural, Trans, msg, plural} from '@lingui/macro'
 import {useSession} from '#/state/session'
 import {useInviteCodesQuery} from '#/state/queries/invites'
+import {ScrollView} from '#/view/com/util/Views'
 
 export function DesktopRightNav() {
   const pal = usePalette('default')
@@ -29,73 +30,77 @@ export function DesktopRightNav() {
 
   return (
     <View style={[styles.rightNav, pal.view]}>
-      <DesktopSearch />
+      <ScrollView contentContainerStyle={{borderWidth: 0}}>
+        <View style={{paddingVertical: 20}}>
+          <DesktopSearch />
 
-      {hasSession && (
-        <View style={{paddingTop: 18, marginBottom: 18}}>
-          <DesktopFeeds />
-        </View>
-      )}
-
-      <View
-        style={[
-          styles.message,
-          {
-            paddingTop: hasSession ? 0 : 18,
-          },
-        ]}>
-        {isSandbox ? (
-          <View style={[palError.view, styles.messageLine, s.p10]}>
-            <Text type="md" style={[palError.text, s.bold]}>
-              SANDBOX. Posts and accounts are not permanent.
-            </Text>
-          </View>
-        ) : undefined}
-        <View style={[s.flexRow]}>
           {hasSession && (
-            <>
+            <View style={{paddingTop: 18, marginBottom: 18}}>
+              <DesktopFeeds />
+            </View>
+          )}
+
+          <View
+            style={[
+              styles.message,
+              {
+                paddingTop: hasSession ? 0 : 18,
+              },
+            ]}>
+            {isSandbox ? (
+              <View style={[palError.view, styles.messageLine, s.p10]}>
+                <Text type="md" style={[palError.text, s.bold]}>
+                  SANDBOX. Posts and accounts are not permanent.
+                </Text>
+              </View>
+            ) : undefined}
+            <View style={[s.flexRow]}>
+              {hasSession && (
+                <>
+                  <TextLink
+                    type="md"
+                    style={pal.link}
+                    href={FEEDBACK_FORM_URL({
+                      email: currentAccount?.email,
+                      handle: currentAccount?.handle,
+                    })}
+                    text={_(msg`Feedback`)}
+                  />
+                  <Text type="md" style={pal.textLight}>
+                    &nbsp;&middot;&nbsp;
+                  </Text>
+                </>
+              )}
               <TextLink
                 type="md"
                 style={pal.link}
-                href={FEEDBACK_FORM_URL({
-                  email: currentAccount?.email,
-                  handle: currentAccount?.handle,
-                })}
-                text={_(msg`Feedback`)}
+                href="https://blueskyweb.xyz/support/privacy-policy"
+                text={_(msg`Privacy`)}
               />
               <Text type="md" style={pal.textLight}>
                 &nbsp;&middot;&nbsp;
               </Text>
-            </>
-          )}
-          <TextLink
-            type="md"
-            style={pal.link}
-            href="https://blueskyweb.xyz/support/privacy-policy"
-            text={_(msg`Privacy`)}
-          />
-          <Text type="md" style={pal.textLight}>
-            &nbsp;&middot;&nbsp;
-          </Text>
-          <TextLink
-            type="md"
-            style={pal.link}
-            href="https://blueskyweb.xyz/support/tos"
-            text={_(msg`Terms`)}
-          />
-          <Text type="md" style={pal.textLight}>
-            &nbsp;&middot;&nbsp;
-          </Text>
-          <TextLink
-            type="md"
-            style={pal.link}
-            href={HELP_DESK_URL}
-            text={_(msg`Help`)}
-          />
-        </View>
-      </View>
+              <TextLink
+                type="md"
+                style={pal.link}
+                href="https://blueskyweb.xyz/support/tos"
+                text={_(msg`Terms`)}
+              />
+              <Text type="md" style={pal.textLight}>
+                &nbsp;&middot;&nbsp;
+              </Text>
+              <TextLink
+                type="md"
+                style={pal.link}
+                href={HELP_DESK_URL}
+                text={_(msg`Help`)}
+              />
+            </View>
+          </View>
 
-      {hasSession && <InviteCodes />}
+          {hasSession && <InviteCodes />}
+        </View>
+      </ScrollView>
     </View>
   )
 }
@@ -168,12 +173,10 @@ function InviteCodes() {
 const styles = StyleSheet.create({
   rightNav: {
     position: 'absolute',
-    top: 20,
     // @ts-ignore web only
     left: 'calc(50vw + 320px)',
     width: 304,
-    // @ts-ignore web only
-    maxHeight: '90vh',
+    height: '100%',
   },
 
   message: {
-- 
cgit 1.4.1